1. 程式人生 > >css 設定 多行超出 顯示為 省略號 ,可 多行超出 顯示為 省略號

css 設定 多行超出 顯示為 省略號 ,可 多行超出 顯示為 省略號

開發過程中我們可能會遇到這樣的需求:

        有一行文字,不足一行,全部顯示,超出一行,行尾顯示為省略號。

可能你會有些掃操作,用 JS 去動態的判斷,儘管效果已經實現,但是看上去搓的一逼,配不上前端這個詞。

下面給你介紹 兩種 優雅的 方式 ,來實現這個效果。

HTML如下:

<div class="text-to">
       這是測試,這是測試,這是測試,這是測試,這是測試,這是測試,這是測試,
       這是測試,這是測試,這是測試,這是測試,這是測試,這是測試,這是測試,
       這是測試,這是測試,這是測試
</div>

1:一行,超出顯示為省略號

.overflow-to-ellipsis{
    width: 200px;
    background: red;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}

效果如圖:

但是,某些時候,產品經理似乎總有改不完的需求和各式各樣變態的需求。

比如,兩行超出顯示為省略號

再比如,三行超出顯示為省略號

再比如......

2、多行,超出顯示為省略號

備註:此方法相容性不佳,safari 和 chrome 支援比較好,所以感覺在 移動端 比較好用吧

.text-to {
    background: red;
    color: white;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
     display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
   
}

效果如下: 

修改 -webkit-line-clamp 的 值,就可以控制行數。

親測有效!親測有效!親測有效!

親測有效!親測有效!親測有效!

親測有效!親測有效!親測有效!

歡迎加微信 共同學習:

lzy2308023