[CSS] how to use white-space

  最近在玩這 css屬性: white-space, 相信很多人在用的時候常常都是一知半解在玩他. 不過瞭解原理跟定義之後其實是蠻簡單的屬性. white-space有六個 property values, inherit是繼承父元件屬性值就不另外介紹, 下面跟各位一一就定義說明一下.

• normal: 連續的空白將會被合併為一個, 文字在容器內會合理的換行.
• nowrap: 連續的空白將會被合併為一個, 文字直到遇到 <br> 標籤才會換行.
• pre: 空白將會被保留, 換行符號 (line break)也會呈現. 效果類似 HTML的 <pre> 這個標籤.
• pre-wrap: 空白將會保留, 在容器內文字也會合理換行, 遇到換行符號 (line break)也會換行.
• pre-line: 連續的空白將會會合併為一個, 在容器內文字也會合理換行, 遇到換行符號 (line break)也會換行.

  下面我實做了這幾個案例, 各位可以觀察 第一句子後面的 Vestibulum這邊空白字元跟換行的情況, 就比較知道white-space的實際運作情況. 可以點擊右上角 Edit on CodePen連結顯示完整程式碼.

Check out this Pen!