`單行文字隱藏`
width:
300px;
/* 1. 溢位省略號顯示 */
white-space: nowwarp;
//nomal(文字換行) nowwarp （不換行）
/* 2.溢位的部分隱藏起來 */
overflow: hidden;
/* 3. 文字溢位的時候用省略號來顯示 */
text-overflow: ellipsis;
// clip（直接截斷）,ellipsis(省略號表示)
`多行文字隱藏`
width:
300px;
overflow: hidden;
text-overflow: ellipsis;
/* 彈性伸縮盒子模型顯示 */
display:
-webkit-box;
/* 限制在乙個塊元素顯示的文字的行數 */
-webkit-line-clamp:3;
/* 設定或檢索伸縮盒物件的子元素的排列方式 */
-webkit-box-orient: vertical;
共：有寬度，超出隱藏，超出用什麼顯示
異：
css 文字溢位省略號
css 文字溢位後顯示省略號，這是乙個非常常規的操作，但是你會發現在網上很多給出的例子兩行之後顯示省略號，卻沒有用。這是為什麼呢？please look follow。在一行省略的 text oneline簡單介紹下 white space 這個是處理空白符的，但是這東西還不是這麼簡單的。這是一些文...
css實現文字溢位省略號
css常用屬性 overflow hidden 超出的文字隱藏 text overflow ellipsis 溢位用省略號顯示 white space nowrap 溢位不換行,只能顯示一行 這個只是用適用於單行文字溢位情況，之前處理多行文字的話需要js來支援。css3新加屬性 display we...
CSS 多行溢位省略號
參考文件 部落格 webkit line clamp display box布局的詳細介紹 webkit line clamp 限制在乙個塊元素顯示的文字的行數。是乙個不規範的屬性，它沒有出現在 css 規範草案中。為了實現限制行數，它需要組合其他外來的webkit屬性一起使用 將物件作為彈性伸縮盒...