1. 程式人生 > 其它 >CSS 文字溢位 text-overflow,word-break,word-wrap,white-space

CSS 文字溢位 text-overflow,word-break,word-wrap,white-space

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 指定的是單詞內的斷句方式。