深入理解CSS中的空白符和換行 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　CSS3新增了兩個換行屬性word-wrap和word-break。把空白符和換行放在一起說，是因為實際上空白符是包括換行的，且常用的文本不換行是使用的空白符的屬性white-space: nowrap;到底它們還有些什么屬性值，以及有什么對應的用法呢？本文就空白符和換行的內容做詳細介紹和梳理

空白符

定義

　　空白符是指空格、制表符和回車；HTML默認已經把所有空白符合并成一個空格

white-space

　　初始值: normal

　　應用于: 所有元素

　　繼承性: 有

normal: 合并空白符，允許自動換行
nowrap: 合并空白符，不允許自動換行
pre-line: 合并空白符(不包括換行符)，允許自動換行
pre: 不合并空白符，不允許自動換行
pre-wrap: 不合并空白符，允許自動換行(在pre基礎上，保留自動換行)

　　[注意]<pre>元素默認帶有樣式white-space: pre;

　　[注意]IE7-瀏覽器不支持pre-line和pre-wrap這兩個屬性值

<div>They can stay 72-hours 
    within the Shandong      province after they have entered China via the Qingdao International Airport.</div>

文本換行

　　瀏覽器自身帶有文本自動換行的功能，文本容器的右側可以實現自動換行

　　對于英文來說，瀏覽器會在半角空格或連字符的地方自動換行，而不會在單詞的中間突然換行

　　對于中文來說，可以在任何一個文字后面換行，但瀏覽器碰到標點符號時，通常將標點符號以及其前一個文字作為一個整體進行換行

　　所以實際上，white-space解決不了長單詞或URL地址的換行問題

word-wrap

　　word-wrap屬性用來實現長單詞或URL地址的自動換行

　　值: normal | break-word

　　初始值: normal

　　應用于: 所有元素

　　繼承性: 有

word-wrap:normal(瀏覽器只在半角空格或連字符的地方進行換行)
word-wrap:break-word(截斷單詞換行，長單詞從下一行開始)

　　[注意]當white-space的值是nowrap或pre時，word-break和word-wrap屬性都失效

　　[注意]word-wrap在標準中被改為overflow-wrap，但由于兼容問題，一般還是使用word-wrap

word-break

　　CSS3使用word-break屬性來決定自動換行的處理方法。通過具體的屬性設置，不僅可以讓瀏覽器實現半角空格或連字符后面的換行，而且還可以讓瀏覽器實現任意位置的換行。

　　值: normal | break-all | keep-all

　　初始值: normal

　　應用于: 所有元素

　　繼承性: 有

normal: 中文到邊界上的漢字換行，英文從整個單詞換行
break-all: 對于英文長單詞來說，會截斷單詞換行，長單詞占據當前行剩余空間。但對于中文的處理，各瀏覽器不一致
    [1]firefox及safari: 中文到邊界上的漢字換行，且允許標點置于段首
    [2]IE及chrome: 中文到邊界上的漢字換行，但不允許標點置于段首
keep-all: 對于英文長文本不能換行，但對于中文的處理，各瀏覽器不一致
    [1]firefox: 在空白符處換行
    [2]IE及chrome: 在空白符及標點處換行
    [3]safari: 不支持

　　[注意]移動端目前基本都不支持keep-all值　　

　　[注意]當word-break值為break-all時，word-wrap屬性失效；否則兩個屬性都起作用

表格

　　對于表單元格的長文本來說，使用word-wrap或word-break來強制換行需要設置table-layout:fixed

偽元素換行

　　有一個Unicode字符，是專門代表換行符的:0x000A，在CSS中，寫作'\000A'，可以簡寫為'\A'

　　但是，由于瀏覽器會合并空白符。因此，需要使用pre來阻止空白符的合并

　　下面是一個實例

<style>
dt,dd{display:inline;}
dd{margin: 0;font-weight:bold;}
dd+dt::before{content:'\A';white-space:pre;}
dd+dd::before{content:',';font-weight:normal;}
</style>
<dl>
  <dt>姓名:</dt>
  <dd>小火柴</dd>
  <dt>郵箱:</dt>
  <dd>123@qq.com</dd>
  <dd>123@163.com</dd>  
</dl>

最后

　　我個人理解，空白符(white-space)最常用的功能是nowrap，即不換行；而CSS3新增的兩個屬性word-wrap和word-break主要用于解決長文本換行的問題。word-wrap:break-word截斷長文本換行，長文本從下一行開始；word-break:break-all也用于截斷長文本換行，但長文本會占據當前行剩余空間

　　當然，空白符(white-space)除了nowrap，還有其他的一些屬性值。word-wrap和word-break也有針對中文的處理。但由于瀏覽器兼容器問題，用的并不是太多

　　歡迎交流

文章列表