區分 word-wrap/word-break/white-space

weixin_30924079發表於2020-04-04

word-wrap 屬性 設定如何處理元素內的空白(空白:單詞之間的空格等)

word-wrap: normal  (瀏覽器預設換行規則)只允許在斷字點換行

word-wrap: break-word  在長單詞或URL地址內部進行換行

 

word-break 屬性 規定自動換行的處理方法

word-break: normal  (瀏覽器預設換行規則)只允許在斷字點換行 (同word-wrap: normal)

word-break: break-all  允許在單詞內(非CJK:Chinese/Japanese/Korean)換行

word-break: keep-all   只能在半形空格或連字元處換行(Safari8/9不支援)

區別word-break: break-all word-wrapbreak-word:

word-wrap: break-word  帶有空格的地方或者CJK就會作為可換行的點,很容易出現一片一片的空白區域

word-break: break-all  所有都換行

記憶:wbba (微博吧)  ,wbbw (我五百萬)

 演示地址:http://www.zhangxinxu.com/study/201511/word-break-break-all-word-wrap-break-word.html

 

word-spacing: 是單詞之間的間距

 

white-space: 字元是否換行顯示

white-space: normal (預設: 文字會換行,區別於上面的兩個概念,上面兩個講的是文字內單詞word的情況)

white-space: nowrap 文字不會換行,文字會在同一行上繼續,直到遇到<br>標籤為止

white-space: pre  空白會被瀏覽器保留,類似於<pre>標籤

white-space: pre-wrap  保留空白符並正常換行

white-space: pre-line: 合併空白符序列,但是保留換行

white-space: inherit  從父元素繼承該屬性

例子:規定段落中的文字不換行

p { white-space: nowrap}

  ------------>        

 

轉載於:https://www.cnblogs.com/benbendu/p/7448784.html

相關文章