原文出處: https://www.cnblogs.com/dfyg-xiaoxiao/p/9640422.html
延伸閱讀:你真的瞭解word-wrap和word-break的區別嗎?
word-wrap:break-word與word-break:break-all共同點:
是都能把長單詞強行斷句;
word-wrap:break-word與word-break:break-all 不同點:
word-wrap:break-word會首先起一個新行來放置長單詞,新的行還是放不下這個長單詞則會對長單詞進行強制斷句;
word-break:break-all則不會把長單詞放在一個新行裏,當這一行放不下的時候就直接強制斷句了。
white-space、word-break、word-wrap(overflow-wrap)估計是css裏最基本又最讓人迷惑的三個屬性了,我也是用了n次都經常搞混,必須系統整理一下,今天我們就把這三個屬性徹底搞清楚!
測試代碼
(文末有本文中所有例子的代碼)
下面是本文中用於測試三個樣式屬性展現情況的html代碼:
<div id="box">
Hi ,
This is a incomprehensibilities long word.
</br>
你好 ,
這 是一個不可思議的長單詞
</div>複製代碼
現在只給了它一個寬度和邊框,沒有其它任何樣式,下面是它目前的展現情況:
可以看到,nbsp;
和</br>
可以正常發揮作用,而連續的空格會被縮減成一個(比如This和is之間的三個空格變成了一個),換行符也全都無效。句子超過一行後會自動換行,而長度超過一行的單個單詞會超出邊界。
接下來我們看下, 給它上面三個css屬性賦值後會出現什麼變化。
white-space
正如它的名字,這個屬性是用來控制空白字符的顯示的,同時還能控制是否自動換行。它有五個值:normal | nowrap | pre | pre-wrap | pre-line
。因爲默認是normal
,所以我們主要研究下其它四種值時的展現情況。
(爲了方便比較,下文所有圖,左側爲normal
即初始情況,右側爲賦上相應值時的情況)
先看下white-space:nowrap
時的情況:
不僅空格被合併,換行符無效,連原本的自動換行都沒了!只有</br>
才能導致換行!所以這個值的表現還是挺簡單的,我們可以理解爲永不換行
。
white-space:pre
:
空格和換行符全都被保留了下來!不過自動換行還是沒了。保留,所以pre
其實是preserve
的縮寫,這樣就好記了。
white-space:pre-wrap
:
顯然pre-wrap
就是preserve
+wrap
,保留空格和換行符,且可以自動換行。
white-space:pre-line
:
空格被合併了,但是換行符可以發揮作用,line
應該是new line
的意思,自動換行還在,所以pre-line
其實是preserve
+new line
+wrap
。
我整理了一個表予以總結:
是否能發揮作用 | 換行符 | 空格 | 自動換行 | </br>、nbsp; |
---|---|---|---|---|
normal | × | ×(合併) | √ | √ |
nowrap | × | ×(合併) | × | √ |
pre | √ | √ | × | √ |
pre-wrap | √ | √ | √ | √ |
pre-line | √ | ×(合併) | √ | √ |
word-break
從這個名字可以知道,這個屬性是控制單詞如何被拆分換行的。它有三個值:normal | break-all | keep-all
。
word-break:keep-all
:
所有“單詞”一律不拆分換行,注意,我這裏的“單詞”包括連續的中文字符(還有日文、韓文等),或者可以理解爲只有空格可以觸發自動換行
word-break:break-all
:
所有單詞碰到邊界一律拆分換行,不管你是incomprehensibilities
這樣一行都顯示不下的單詞,還是long
這樣很短的單詞,只要碰到邊界,都會被強制拆分換行。所以用word-break:break-all
時要慎重呀。
這樣的效果好像並不太好呀,能不能就把incomprehensibilities拆一下,其它的單詞不拆呢?那就需要下面這個屬性了:
word-wrap(overflow-wrap)
word-wrap
又叫做overflow-wrap
:
word-wrap 屬性原本屬於微軟的一個私有屬性,在 CSS3 現在的文本規範草案中已經被重名爲 overflow-wrap 。 word-wrap 現在被當作 overflow-wrap 的 “別名”。 穩定的谷歌 Chrome 和 Opera 瀏覽器版本支持這種新語法。
這個屬性也是控制單詞如何被拆分換行的,實際上是作爲word-break
的互補,它只有兩個值:normal | break-word
,那我們看下break-word
:
終於達到了上文我們希望的效果,只有當一個單詞一整行都顯示不下時,纔會拆分換行該單詞。
所以我覺得overflow-wrap
更好理解好記一些,overflow,只有長到溢出的單詞纔會被強制拆分換行!
(其實前面的word-break
屬性除了列出的那三個值外,也有個break-word
值,效果跟這裏的word-wrap:break-word
一樣,然而只有Chrome、Safari等部分瀏覽器支持)
總結
最後總結一下三個屬性
- white-space,控制空白字符的顯示,同時還能控制是否自動換行。它有五個值:
normal | nowrap | pre | pre-wrap | pre-line
- word-break,控制單詞如何被拆分換行。它有三個值:
normal | break-all | keep-all
- word-wrap(overflow-wrap)控制長度超過一行的單詞是否被拆分換行,是
word-break
的補充,它有兩個值:normal | break-word
相信讀完了本文,你應該對white-space、word-break、word-wrap有比較系統的認識了吧,如果短時間還是記不住,收藏一下常看看就能記住的XD~如果你喜歡這篇文章的話,希望能點個贊~
以後會定期整理總結一些疑難知識點~歡迎關注~
下面是本文裏所有例子的代碼的地址,每個屬性做成了選項,方便操作學習~
https://codepen.io/YGYOOO/pen/jvyrWK