單行實現：
// css部分
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
標籤為止。
效果如下：
多行實現：
// css部分
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
display: -webkit-box 將物件作為彈性伸縮盒子模型顯示
-webkit-box-orient 設定伸縮物件的子元素的排列方式；vertical：從上向下垂直排列子元素。
-webkit-line-clamp 限制乙個塊元素顯示的文字的行數
效果如下：
前端 單行文字溢位省略與多行文字溢位省略
text ellipsis示例 效果 multiline ellipsis示例 慶曆四年春，滕子京謫守巴陵郡。越明年，政通人和，百廢具興，乃重修岳陽樓，增其舊制，刻唐賢今人詩賦於其上，屬予作文以記之。予觀夫巴陵勝狀，在洞庭一湖。銜遠山，吞長江，浩浩湯湯，橫無際涯，朝暉夕陰，氣象萬千，此則岳陽樓之大觀...
CSS 實現單行 多行文字溢位，省略號顯示
實現 overflow hidden text overflow ellipsis white space nowrap 示例 divstyle head 單行文字溢位，省略號顯示 div body 效果圖 實現 display webkit box webkit box orient vertic...
CSS中多行文字溢位省略
overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行,只能顯示一行 這個只是用適用於單行文字溢位情況，之前處理多行文字的話需要js來支援。display webkit box 將物件作為彈性伸...