CSS實現單行 多行文字溢位顯示省略號

單行文字溢位顯示省略號的實現方法：

overflow: hidden; 

/*隱藏文字 
*/text-overflow: ellipsis; 
/*省略號 
*/white-space: nowrap 
/*強制不換行 
*/

多行顯示省略號的實現方法：

display: -webkit-box; 

/*將物件作為彈性伸縮盒子模型顯示 
*/-webkit-box-orient: vertical; 
/*設定或檢索伸縮盒物件的子元素的排列方式 
*/-webkit-line-clamp: 3; 
/*限制顯示文字的行數 
*//*
這是乙個不規範的屬性，它沒有出現在 css 規範草案中 
*/overflow: hidden;
text-overflow: ellipsis;

因為使用了 webkit 的 css 擴充套件屬性，只有-webkit核心才有作用，移動端瀏覽器絕大部分是 webkit 核心的，所以該方法也適用於移動端。

首先在包含文字的元素裡，嵌入乙個...，然後包含文字的元素右側設定 padding-right 預留出省略號... 的位置, 最後利用絕對定位將...定位至右側的 padding-right 區域

p span

span 標籤也可以換成偽元素 :after 來實現，原理差不多

p p::after

這種方法對搜尋引擎還是比較友好的，因為標題實際上並未被擷取，而是侷限於寬度未被顯示而已。但是在內容不足設定顯示行的情況下，省略號 「...」 依然會存在，並不會隱藏，可以結合 js 優化。暫時還沒有想出利用 css 來實現不足顯示行隱藏的辦法。

function

mitulinehide(num,con) 
else
}mitulinehide(100, "element");

或

css **：

.ele

js **：

$(".words").each(function
(i)});

css實現單行（多行）文字溢位顯示

overflow hidden text overflow ellipsis white space nowrap 當然還需要加寬度width屬來相容部分瀏覽。以上為單行文字溢位 以下為多行文字溢位 display webkit box webkit box orient vertical webk...

CSS實現單行 多行文字溢位顯示 的總結

效果圖如下 實現方法 overflow hidden text overflow ellipsis white space nowrap 還需要加寬度width屬來相容部分瀏覽。效果圖如下 實現方法 display webkit box webkit box orient vertical webk...

css 實現單行 多行文字顯示

1.單行顯示文字，超出顯示省略號，很容易實現 需要加寬度width屬來相容部分瀏覽 width 200px overflow hidden text overflow ellipsis white space nowrap 2.多行文字顯示，限制行數，超出顯示省略號，如下實現 width 200px...