css實現超出長度文字自動隱藏或用省略號表示

2021-08-16 17:44:39 字數 664 閱讀 9505

名字剛好
span
overflow: hiddenoverflow 屬性規定當內容溢位元素框時發生的事情。這個屬性定義溢位元素內容區的內容會如何處理。hidden 表示內容會被修剪,並且剪掉的內容是不可見的。

white-space: nowrap

規定文字不進行換行。white-space 屬性設定如何處理元素內的空白。nowrap 表示文字不會換行,文字會在在同一行上繼續,直到遇到

標籤為止。

text-overflow: ellipsis

text-overflow 屬性規定當文字溢位包含元素時發生的事情。ellipsis 表示顯示省略符號來代表被修剪的文字。

width:50px

width 屬性設定div的長度。

word-break: break-all

表示文字長度超過就自動換行

明白了以上解釋,你就可以靈活運用上述**了。

css實現超出div長度文字自動隱藏或用省略號表示

展現效果 展現效果 css實現超出div長度用省略號表示 overflow hidden overflow 屬性規定當內容溢位元素框時發生的事情。這個屬性定義溢位元素內容區的內容會如何處理。hidden 表示內容會被修剪,並且剪掉的內容是不可見的。white space nowrap 規定文字不進行...

css實現超出div長度文字自動隱藏或用省略號表示

在網頁設計中,一些區域的標題文字是不能換行的,例如首頁顯示的文章標題,因為布局是固定的,換行會打亂布局,從而使網頁產生錯位。因此,我們需要一行一段文字,超出行寬的文字用省略號表示或者直接去掉不用省略號代替。看看下圖中的例項。超出div長度用省略號表示 css實現超出div長度用省略號表示 源 其實不...

css實現超出長度文字自動隱藏或用省略號表示

html 業務需求分析書 系統營業日扎帳報表 收費彙總表及收費明細表 cssaoverflow hidden overflow 屬性規定當內容溢位元素框時發生的事情。這個屬性定義溢位元素內容區的內容會如何處理。hidden 表示內容會被修剪,並且剪掉的內容是不可見的 text overflow el...