實現**：
overflow
: hidden;
text-overflow
:ellipsis;
white-space
: nowrap;
>
...>
divstyle
>
head
>
>
單行文字溢位，省略號顯示
div>
body
>
實現**：
display
: -webkit-box;
-webkit-box-orient
: vertical;
-webkit-line-clamp
: 2;
overflow
: hidden;
>
...>
divstyle
>
head
>
>
多行文字溢位，省略號顯示；多行文字溢位，省略號顯示
div>
body
>
適用範圍：
因其使用了 webkit 的 css 擴充套件屬性，該方法適用於 webkit 瀏覽器及移動端
注釋：
-webkit-line-clamp用來限制在乙個塊元素顯示的文字的行數。 為了實現該效果，它需要組合其他的 webkit 屬性。常見結合屬性：
display: -webkit-box必須結合的屬性，將物件作為彈性伸縮盒子模型顯示 。
-webkit-box-orient必須結合的屬性，設定或檢索伸縮盒物件的子元素的排列方式 。
實現**：
div
div::after
>
...>
divdiv::after
style
>
head
>
>
>
多行文字溢位，省略號顯示；多行文字溢位，省略號顯示
div>
body
>
適用範圍：
適用範圍廣，可結合 js 進行優化
注釋：
將 height 設定為line-height的整數倍，防止超出的文字露出。
給div::after新增漸變背景可避免文字只顯示一半。
由於 ie6-7 不顯示content內容，所以要新增標籤相容 ie6-7（如：…）；相容 ie8 需要將::after替換成:after。
前端 單行文字溢位省略與多行文字溢位省略
text ellipsis示例 效果 multiline ellipsis示例 慶曆四年春，滕子京謫守巴陵郡。越明年，政通人和，百廢具興，乃重修岳陽樓，增其舊制，刻唐賢今人詩賦於其上，屬予作文以記之。予觀夫巴陵勝狀，在洞庭一湖。銜遠山，吞長江，浩浩湯湯，橫無際涯，朝暉夕陰，氣象萬千，此則岳陽樓之大觀...
css 實現單行 多行文字溢位省略號顯示
單行實現 css部分 overflow hidden text overflow ellipsis white space nowrap white space 設定如何處理元素內的空白 值為nowrap 文字不會換行，文字會在同一行上繼續，直到遇到 標籤為止。效果如下 多行實現 css部分 dis...
CSS中多行文字溢位省略
overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行,只能顯示一行 這個只是用適用於單行文字溢位情況，之前處理多行文字的話需要js來支援。display webkit box 將物件作為彈性伸...