談談如何用CSS處理文本格式

前言

文本方面的CSS內容不少，但只要是用過一下 office word 來編輯過文章的童鞋都能輕易理解其中的大部分。那么，今天僅僅來談談其中最復雜的部分—— 文本格式 。

處理換行、空格和Tab：white-space

眾所周知，瀏覽器對HTML中的換行符是采取忽略政策的，因此一般推薦使用 <br /> 來換行。另外，對于多個空格(space)以及Tab也只會認作一個空格(space)來處理，因此當需要用到多個空格的時候，就需要利用空格的實體字符—— &nbsp; 來強制顯示空格。

實際上，以上的這種種麻煩，CSS都可以輕易克服： white-space 。

white-space: normal | pre | nowrap | pre-wrap | pre-line

下面來根據上面這表格來介紹一下 white-space 各值的含義：

• New lines 表示對換行符的處理， Spaces and tabs 表示對多個空格及Tab的處理， Text wrapping 表示文本是否會在文本內容超出容器寬度時進行自動換行。

• 當 white-space 為 normal （瀏覽器默認值），即換行符無效(collapse)、多個空格及Tab被折疊(collapse)成一個空格來處理、文本內容會自動換行。

• 當 white-space 為 nowrap 時，文本內容不自動換行（至于是強行突破容器還是截斷顯示則要視乎另一個CSS——overflow，下文詳述），其它表現與 normal 一致。

• 當 white-space 為 pre 時，換行符有效、多個空格及Tab不會被折疊，文本不會自動換行。此屬性多用來展示程序代碼段，可以保留其中的換行及縮進，而事實上， <pre> 的瀏覽器默認樣式中就有 white-space: pre; 。

• pre-wrap 與 pre-line 看表格即知，不再詳述。

一個長單詞超出整個容器寬度時是否換行：word-wrap

必須注意到，這是 一個 長單詞便超出容器寬度的情況，而且只需考慮英文，中文沒有此特性。

word-wrap: normal|break-word;

• normal ，長單詞不換行

• break-word ，長單詞自動換行

決定文本的換行點：word-break

當一行的末尾已不能完整放下某個單詞A，那么就需要決定用哪種策略來放置這單詞A（肯定是英文了，中文沒這問題）了：

word-break: normal|break-all|keep-all;

• normal ，使用瀏覽器默認的換行規則。

• break-all ，擠擠更健康，硬是讓單詞A擠上去，放不下的部分就換行到下一行繼續顯示。這實際上是沒有把這個單詞看做是一個整體，而是以字母作為最小可換行的單位：

• keep-all ，不擠不擠我就不擠，哪怕實際上這個單詞獨占一行也無法完整顯示，也要另起一行來顯示：

word-wrap 和 word-break

這兩項CSS屬性非常類似，一是都管換行的，二是都針對英文。在我看來， word-break 比 word-wrap 更徹底，因為只要設置 word-break: break-all; ，那么就從根本上否定了“拆分單詞”這一事實，而是轉變為“如何放置一串字母”，那么換行就是理所當然的了。而 word-wrap: break-word; 實際上還是把單詞當做是“單詞”來看待的，只是為了顯示效果 委曲求全 了。

規定如何處理內容溢出容器*：overflow

/* 默認值。內容不會被修剪，會呈現在元素框之外 */
overflow: visible;

典型如上文的：

/* 內容會被修剪，并且其余內容不可見 */
overflow: hidden;

硬是截掉超出容器部分的內容：

/* 內容會被修剪，瀏覽器會顯示滾動條以便查看其余內容 */
overflow: scroll;

無論有無內容溢出容器， 都 顯示滾動條；如有內容溢出，通過滾動條可以查看溢出內容：

/* 由瀏覽器定奪，如果內容被修剪，就會顯示滾動條 */
overflow: auto;

若有內容溢出容器， 才 顯示滾動條：

/* 規定從父元素繼承overflow屬性的值 */
overflow: inherit;

添加省略號:text-overflow

text-overflow 是建立在 overflow: hidden; 等基礎上的，如果overflow為其它值(inherit的話就要父級情況)則無效。 text-overflow 有很多可取的值，但實際上目前瀏覽器兼容性較好的只有 clip | ellipsis ：

• clip ：瀏覽器默認值就是 clip ，就是什么都不加

• ellipsis ：給被截掉的文本內容末尾添上個 … ：

text-overflow 僅支持水平方向的溢出，換句話說，只支持單單一行文本內容的溢出（上圖那情況雖然是多行，但這種情況不會出現在中文，因為中文都是自動換行的），若想支持多行，則需要使用插件，推薦 dotdotdot ：