1.單行文字溢位省略號
（1）width 寬度
（2）white-space：nowrap 強制文字單行顯示
（3）overflow：hidden 溢位內容為隱藏
（4）text-overflow：ellipsis/clip
white-space:pre（可以顯示空格和回車）/pre-wrap（文字可以自己換行顯示）/pre-line（不識別空格）/normal（不顯示省略號，只是簡單的裁剪）
如果文字溢位會顯示滾動條 overflow：auto；
容器有滾動條overflow：scroll
overflow：visible是預設值，內容不會被修剪，會顯示在元素框以外
2.元素型別
分類：（1）塊元素：設定寬高生效，預設情況下，在頁面上是從上往下排列；可以作為其他元素的容器，呈現的形狀是矩形。例如div，p，ul…
（2）行內元素：預設情況下，橫向排列，並且中間有縫隙，設定寬度和高度不生效，對於margin的上下、line-heigth、text-indent不生效，對padding上下生效，但是解析的結果都比較不符合想要的結果。例如：span、b、a…
（3）行內塊元素：既有行內元素的特點，又有塊元素的特點。例如：img、input
3.元素型別轉換display
display：block（塊）/inline（行內）/inline-block（行內塊）/none（隱藏）/list-item（li自帶的屬性）
4.多行文字溢位
display：-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden
單行和多行文字溢位顯示省略號
單行一般加這個三個屬性即可 overflow hidden text overflow ellipsis white space nowrap 多行需加下面屬性 display webkit box webkit line clamp 2 webkit box orient vertical ove...
實現單行 多行文字溢位顯示省略號
單行溢位,顯示省略號，用text overflow屬性，需要增加寬度 溢位隱藏 overflow hidden 隱藏的部分用.表示 text overflow ellipsis 文字不能轉行 white space nowrap width 244px 用text overflow ellipsis...
單行 多行文字溢位隱藏顯示省略號
classname classname 其中多行文字中，因為我們使用了webkit的擴充套件屬性，該方法適用於核心為webkit的瀏覽器 注意 webkit line clamp是用來限制乙個塊元素顯示的文字行數。為了實現對應的效果，它需要結合其他的webkit屬性。常見的有 1 display w...