當文字溢位時顯示為省略號

當元素設定固定寬度之後，如果元素內的文字超出寬度之後將其設定為省略號效果的方法：

text-overflow 屬性規定當文字溢位包含元素時發生的事情。

text-overflow: clip|ellipsis|string;

描述clip

修剪文字。

ellipsis

顯示省略符號來代表被修剪的文字。

string

使用給定的字串來代表被修剪的文字。

white-space 屬性設定如何處理元素內的空白。值描述

normal

預設。空白會被瀏覽器忽略。

pre空白會被瀏覽器保留。其行為方式類似 html 中的

標籤。

nowrap
文字不會換行，文字會在在同一行上繼續，直到遇到 
標籤為止。
pre-wrap
保留空白符序列，但是正常地進行換行。
pre-line
合併空白符序列，但是保留換行符。
inherit
規定應該從父元素繼承 white-space 屬性的值。  
確保所設定元素已有固定寬度：
.calss

文字溢位顯示省略號

在開發過程中經常會遇到文字過長超出文字的寬度，這時候我們會考慮將文字截斷，但是只顧截斷會失去互動的友好性，因為使用者不知道後面還有內容，我們會在文字超出寬度的部分加上省略號，然後加上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 效果如圖 但是這個屬性只支援單行文字的溢位顯示省略號，如果我們要實現多行文字溢位顯示省略號呢。接下來重點說...