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

回應 (Leave a comment)