CSS文本溢出顯示省略號（ellipsis）

1、css

text-overflow語法：
text-overflow : clip | ellipsis 

text-overflow參數值和解釋：
clip : 　不顯示省略標記（...），而是簡單的裁切
ellipsis : 　當對象內文本溢出時顯示省略標記（...）

 

單行

display: block;
width: 80px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

 

多行

直接用css屬性設置(只有-webkit內核才有作用)

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

移動端瀏覽器絕大部分是WebKit內核的，所以該方法適用於移動端；

-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數,這是一個不規范的屬性（unsupported WebKit property），它沒有出現在 CSS 規范草案中。

display: -webkit-box將對象作為彈性伸縮盒子模型顯示 。

-webkit-box-orient設置或檢索伸縮盒對象的子元素的排列方式 。

text-overflow: ellipsis以用來多行文本的情況下，用省略號“…”隱藏超出范圍的文本。

以下作為溢出顯示省略號，line-clamp 表示顯示多少行的數據，在數據最后顯示…

.ellipsis1{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}

.ellipsis2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;text-overflow:ellipsis;overflow:hidden}

.ellipsis3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;text-overflow:ellipsis;overflow:hidden}

 

2、插件

Clamp.jt

jQuery.dotdotdot