CSS 文字溢位 text-overflow,word-break,word-wrap,white-space
阿新 • • 發佈:2022-05-24
1. 單詞斷行
1.1 什麼是單詞(word)
英文的單詞我們都知道,空格分開的都是一個個單詞,中文的單詞在瀏覽器中指的一個字。
下面是一個瀏覽器判定單詞的例子:
中文 //2 個單詞 Hello world //2 個單詞 Helloworld //1 個單詞
1.2 預設斷行效果
當父容器無法在一行內容納文字時,瀏覽器會考慮斷行。
中文從單詞之間斷行
英文從單詞之間斷行
超長英文單詞不斷行
連字元之間斷行
URL網址不斷行
2. word-wrap 和 word-break
word-wrap
值 | 描述 |
---|---|
normal | 只在允許的斷字點換行(瀏覽器保持預設處理)。 |
break-word | 在長單詞或 URL 地址內部進行換行。 |
word-break
值 | 描述 |
---|---|
normal | 使用瀏覽器預設的換行規則。 |
break-all | 允許在單詞內換行。 |
keep-all | 只能在半形空格或連字元處換行。 |
word-wrap 和 word-break 都用來指定文字發生溢位時是否換行。
不同的是,
word-wrap 指定的是瀏覽器換行處理過程,遇到一個 word 超長,對文字已經換行了,但是仍然溢位,這時是否允許瀏覽器在單詞內斷句。
word-break 指定的是單詞內的斷句方式。