2011
Sep
03
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.
目前回應 Comments(3 comments)
Lykoi 2022/04/09
感謝整理
poppy 2021/05/14
非常實用XD 看到死都不換行就笑了
Facy 2019/06/06
很棒的整理:P