1. 單行文字溢位
overflow:hidden; //超出限定的寬度就隱藏內容
white-space: nowrap; //
文字在一行顯示不能換行
text-overflow: ellipsis; //
顯示省略符號來代表被修剪的文字
2. 多行文字溢位
overflow: hidden; //超出限定的寬度就隱藏內容
text-overflow: ellipsis; //
顯示省略符號來代表被修剪的文字
display: -webkit-box; //
將物件作為彈性伸縮盒子模型顯示
-webkit-line-clamp: 3; //
限制在乙個塊元素顯示的文字的行數,表示最多顯示3行
-webkit-box-orient: vertical; //
設定或檢索伸縮盒物件的子元素的排列方式
其中，後三行要搭配使用~
【overflow】內容溢位元素框時發生的事情值描述
visible
預設值。內容不會被修剪，會呈現在元素框之外。
hidden
內容會被修剪，並且其餘內容是不可見的。
scroll
內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
auto
如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。
inherit
規定應該從父元素繼承 overflow 屬性的值。
特別說明：
1. 需要設定長寬
2. 如果值為 scroll，不論是否需要，使用者**都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。
【text-overflow】當文字溢位包含它的元素，應該發生什麼值描述
clip
修剪文字。
ellipsis
顯示省略符號來代表被修剪的文字。
string
使用給定的字串來代表被修剪的文字。
【white-space】規定段落中的文字不進行換行值描述
normal
預設。空白會被瀏覽器忽略。
pre空白會被瀏覽器保留。其行為方式類似 html 中的標籤。
nowrap
文字不會換行，文字會在在同一行上繼續，直到遇到
標籤為止。
pre-wrap
保留空白符序列，但是正常地進行換行。
pre-line
合併空白符序列，但是保留換行符。
inherit
規定應該從父元素繼承 white-space 屬性的值。
文字溢位顯示省略號
在開發過程中經常會遇到文字過長超出文字的寬度，這時候我們會考慮將文字截斷，但是只顧截斷會失去互動的友好性，因為使用者不知道後面還有內容，我們會在文字超出寬度的部分加上省略號，然後加上title屬性，當使用者滑鼠放到此處提示完整資訊。文字溢位顯示省略號有兩種情況 單行文字 1 text overflo...
文字溢位顯示省略號
使用text overflow屬性，並且要加width寬度屬性 overflow hidden text overflow ellipsis white space nowrap 1.webkit核心和移動端的瀏覽器，使用css擴充套件屬性 display webkit box webkit box...
文字溢位顯示省略號
今天給大家說一下，怎麼實文字溢位顯示省略號 單行文字溢位顯示省略號 實現方法 overflow hidden text overflow ellipsis white space nowrap 效果如圖 但是這個屬性只支援單行文字的溢位顯示省略號，如果我們要實現多行文字溢位顯示省略號呢。接下來重點說...