讓超出的文字顯示為省略號

2021-06-05 13:02:58 字數 737 閱讀 6697

對大片文字的顯示樣式進行限制是css中最常用的地方之一,比如以下幾種情況:

強制不換行:

1div

自動換行:

1div

強制英文單詞斷行:

1div

我們在行列時,經常會出現一行文字超出了寬度,很多人使用了 overflow:hidden,讓超出來的內容隱藏,有沒有一種**讓文字超出時,出現省略號了?

可以使用這種方法:相容ie 火狐:overflow:hidden;white-space:nowrap; -o-text-overflow: ellipsis; text-overflow:ellipsis;

01">

02">

03

10

11

12避免**table和div被撐開變形的css**例項

13

14

CSS文字超出顯示省略號

white space nowrap overflow hidden text overflow ellipsis 但是因為兩個行內元素例如span一起的時候會出現一些間距,為了去掉這些間距我們可以給元素新增font size 0 但這樣做的話,會發現省略號消失了,但不新增font size 0 又...

文字內容超出顯示省略號

display webkit box webkit box orient vertical webkit line clamp 3 overflow hidden webkit line clamp用來限制在乙個塊元素顯示的文字的行數。為了實現該效果,它需要組合其他的webkit屬性。常見結合屬性 ...

顯示文字 文字超出省略號顯示

在前端開發過程中,經常會遇到文字超過一行內容的情況,要求隱藏超出部分並且以省略號顯示。一 white space屬性 該屬性定義 規定段落中的文字不進行換行。所有主流瀏覽器都相容 二 overflow屬性 overflow 屬性規定當內容溢位元素框時發生的事情。所有主流瀏覽器都相容 三 text o...