display: block;font-size:12px;
overflow: hidden;
/*超出部分隱藏
*/white-space: nowrap;/*
不換行*/
text-overflow:ellipsis;/*
超出部分文字以...顯示
*/
首先，要知道css的三條屬性。
overflow:hidden; //超出的文字隱藏
text-overflow:ellipsis; //溢位用省略號顯示
white-space:nowrap; //溢位不換行
這三個是css的基礎屬性，需要記得。
但是第三條屬性，只能顯示一行，不能用在這裡，那麼如果顯示多行呢？
css3解決了這個問題，解決方法如下：
display:-webkit-box; //將物件作為彈性伸縮盒子模型顯示。
-webkit-box-orient:vertical; //從上到下垂直排列子元素（設定伸縮盒子的子元素排列方式）
-webkit-line-clamp:2; //這個屬性不是css的規範屬性，需要組合上面兩個屬性，表示顯示的行數。
最後的css樣式如下：
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
顯示文字 文字超出省略號顯示
在前端開發過程中，經常會遇到文字超過一行內容的情況，要求隱藏超出部分並且以省略號顯示。一 white space屬性 該屬性定義 規定段落中的文字不進行換行。所有主流瀏覽器都相容 二 overflow屬性 overflow 屬性規定當內容溢位元素框時發生的事情。所有主流瀏覽器都相容 三 text o...
Html中文字單行超出和多行超出顯示省略號
單行文字的溢位顯示省略號 width 200px overflow hidden text overflow ellipsis white space nowrap 加寬度width屬來相容部分瀏覽器 多行文字溢位顯示省略號 width 220px height 58px overflow hidd...
CSS文字超出顯示省略號
white space nowrap overflow hidden text overflow ellipsis 但是因為兩個行內元素例如span一起的時候會出現一些間距，為了去掉這些間距我們可以給元素新增font size 0 但這樣做的話，會發現省略號消失了，但不新增font size 0 又...