1. 程式人生 > >單(多)行文本溢出顯示省略號...

單(多)行文本溢出顯示省略號...

標簽 div blog white 元素 pac nor 盒子模型 flow

一、單行文本

width:XXXpx;
overflow: hidden; //溢出隱藏 text-overflow: ellipsis; //顯示省略號來代替被修剪的文本 white-space: nowrap; //不換行

 註:white-space:normal(默認,空白會被瀏覽器忽略)|pre(空白會被瀏覽器保留,行為方式如同<pre>標簽)|nowrap(文本不換行,直到遇到<br />標簽)|pre-wrap(保留空白並正常換行)|pre-line(合並空白並換行)|inherit(繼承);

二、多行文本

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box; //將對象作為彈性伸縮盒子模型顯示 。
-webkit-line-clamp: 2; //用來限制在一個塊元素顯示的文本的行數
-webkit-box-orient: vertical; //設置或檢索伸縮盒對象的子元素的排列方式 。

  

單(多)行文本溢出顯示省略號...