CSS 語法，文字換行，強迫不換行。

CSS 文字換行的 style 為 word-wrap ，透過這個屬性可以指定換行的方式，並可以強制文字不換行。

而 CSS 還有個空白長度的設定，透過 white-space 可以移除連續空白。

• 文字強迫換行 word-break: break-all;
• 依單字換行 word-wrap:break-word;
• 死都不換行 white-space:nowrap;

換行設定， word-wrap & word-break

文字強迫換行，太長的英文字，會自動切成兩半。

• word-break: break-all; 若一個單字過長，超過畫面的寬度，則將單字切斷，並換行。

word-break: break-all;

Before Moammar Long language string Long language string Long language string Long language string, there were the Phoenicians.

從上面的 DEMO 中可以看到 language 這個單字被切成兩斷。

文字自動換行，長英文字不切斷

• word-wrap:break-word; 若一個單字過長，超過畫面的寬度，則將單字換行(不切斷單字)。

word-wrap:break-word;

Before Moammar Long language string Long language string Long language string Long language string, there were the Phoenicians.

不切斷英字單字對於一般的讀者是比較好懂的，唯一的缺點是右邊會出現很大的一塊空白。

空白設定 ： white-space

保留原始空白與換行

• white-space:pre; 保留原始資料的空白與換行，功能與 HTML tag 中的 ＜pre> 相同。

white-space:pre;

Before Moammar Gadhafi, there were the Phoenicians. And the Greeks.

強迫文字不換行

• white-space:nowrap; 移除連續空白，移除換行符號(n r)， 強迫文字不換行。

white-space:nowrap;

Before Moammar Gadhafi, there were the Phoenicians. And the Greeks. 

保留原始空白，但文字自動換行

• white-space:pre-wrap; 保留所有空白，自動換行。

white-space:pre-wrap;

Before Moammar Gadhafi, there were the Phoenicians. And the Greeks. The Romans.

連續空白，取代成一個空白。

• white-space: pre-line ，這個語法可以會自動將多個空白轉換成一個空白

white-space: pre-line;

Before Moammar Gadhafi, there were the Phoenicians. And the Greeks. The Romans.