1. white-space
white-space
用于指定瀏覽器如何處理元素文本中的空格劝堪、制表符和換行符,以及指定當(dāng)元素內(nèi)文本到達容器末尾即將溢出容器時揉稚,是否發(fā)生自動換行秒啦。
white-space
的可取值有:
- normal(默認值):文本中連續(xù)的空格、制表符將被統(tǒng)一替換成一個空格(Collapse)搀玖,換行符不發(fā)生換行余境,轉(zhuǎn)而替換成一個空格(Collapse),當(dāng)文本到達容器末尾時巷怜,自動換行(Wrap)葛超。
- nowrap:文本中連續(xù)的空格、制表符將被統(tǒng)一替換成一個空格(Collapse)延塑,換行符不發(fā)生換行,轉(zhuǎn)而替換成一個空格(Collapse)答渔,當(dāng)文本到達容器末尾時关带,不換行(No wrap)。
- pre:文本中的連續(xù)空格、制表符被保留(Preserve)宋雏,換行符發(fā)生換行(Preserve)芜飘,當(dāng)文本到達容器末尾時,不換行(No wrap)磨总。
- pre-wrap:文本中的連續(xù)空格嗦明、制表符被保留(Preserve),換行符發(fā)生換行(Preserve)蚪燕,當(dāng)文本到達容器末尾時娶牌,自動換行(Wrap)。
- pre-line:文本中連續(xù)的空格馆纳、制表符將被統(tǒng)一替換成一個空格(Collapse)诗良,換行符發(fā)生換行(Preserve),當(dāng)文本到達容器末尾時鲁驶,自動換行(Wrap)鉴裹。
將以上屬性值的特點繪制成圖表如下:
white-space屬性值
關(guān)于以上屬性的具體表現(xiàn),可參考:mdn white-space.
2. word-break
word-break
屬性用于指定當(dāng)文本到達容器末尾需要自動換行時钥弯,文本的分割方式(即確定換行結(jié)點)径荔。
word-break
的可取值有:
- normal(默認值):若在當(dāng)前單詞的基礎(chǔ)上添加下一個單詞后會溢出容器,則在當(dāng)前單詞的末尾處進行換行(下一個單詞放置在第二行脆霎,此時每個單詞視作一個整體猖凛,不可分割)。
- break-all:將文本分割成最小單位绪穆,即對于英文單詞辨泳,分割成單個字母,對于CJK(Chinese/Japanese/Korean)玖院,分割成單字菠红,連續(xù)排列,在容器末尾處換行难菌。
-
keep-all:對于英文文本试溯,表現(xiàn)為
normal
,對于CJK文本郊酒,連續(xù)的多個字作為一個整體(不可分割)遇绞,只有在空格處才會發(fā)生換行。 -
break-word:在
normal
的基礎(chǔ)上燎窘,若一行中只有一個單詞摹闽,且該單詞的長度超出了容器寬度,則該單詞會在容器末尾處發(fā)生分割來進行換行褐健。
關(guān)于以上屬性的具體表現(xiàn)付鹿,可參考:mdn word-break.
3. word-wrap
word-wrap
的可取值為:
- normal(默認值)
- break-word
word-wrap: break-word
與word-break: break-word
作用相同,不過對于Edg、Firefox舵匾、IE瀏覽器俊抵,不支持word-break: break-word
,此時只能用word-wrap: break-word
坐梯。
4. overflow-wrap
overflow-wrap
的可取值為:
- normal(默認值)
- break-word
overflow-wrap
與word-wrap
的作用相同徽诲,其實overflow-wrap
就是word-wrap
經(jīng)過重命名而來,不過對于一些瀏覽器還暫不支持該屬性吵血,此時只能用word-wrap
谎替。