首先傳統的單行文字實現省略號顯示**如下：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
注意點：部分低版本瀏覽器需要加上固定寬度才支援text-overflow屬性。
純css實現多行文字省略號顯示：方法一
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
此方法由於使用了字首webkit只適用於webkit核心的瀏覽器。
具體例子可以檢視
純css實現多行文字省略號顯示：方法二
p
p:after
這裡注意幾點：
1.height高度真好是line-height的3倍；
2.結束的省略號最好用半透明的png做減淡的效果，或者設定背景顏色；
3.ie6-7不顯示content內容，所以要相容ie6-7可以是在內容中加入乙個標籤，比如用...去模擬；
css 實現文字省略號 單行多行
在做移動端的專案時經常會遇到文字過長，塊級元素寬度不夠，造成折行的問題，產品會要求說根據寬度展示，超出部分用點號代替 做這種效果的時候會遇到單行展示和多行展示 單行示例 ellipsis single overflow hidden text overflow ellipsis white spac...
多行文字顯示省略號
單行文字溢位顯示省略號 核心css語句 1 overflow hidden 顧名思義超出限定的寬度就隱藏內容 2 white space nowrap 設定文字在一行顯示不能換行 3 text overflow ellipsis 規定當文字溢位時顯示省略符號來代表被修剪的文字 多行文字溢位顯示省略號...
CSS實現多行文字溢位顯示省略號
單行文字溢位顯示省略號，可以直接使用 text overflow ellipsis white space nowrap 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 多行文字溢位顯示省略號 方案一 使用webkit屬性 webkit line clamp 注意這是乙個不規範的屬性 哈哈哈哈哈哈...