CSS 英文換行、英文強制不換行語法

通常在寫段落 <p> 或是 <div> 內容的時候,內容很容易發生不會換行的情況,尤其是內容是英文或是網址,如下圖:

CSS 文字換行、文字強制不換行語法

那要解麼解決呢?有三種語法:

  • word-break: break-all:文字強迫換行,英文字會被切一半
  • word-wrap: break-word:依單字換行
  • white-space: nowrap:死都不換行

word-break: break-all 換行

若你的文字太長,文字超過區塊的範圍寬度,就將單字切斷並且換行。

語法:word-break: break-all

如下圖:

CSS 文字換行、文字強制不換行語法

word-wrap: break-word 文字自動換行

若一個單字超過區塊內容寬,將單字換行不切斷。

語法:word-wrap: break-word

如下圖:

CSS 文字換行、文字強制不換行語法

white-space: pre 保留原始空白與換行

保留原始資料的空白與換行,功能與 HTML tag 中的 <pre> 相同。

語法:white-space: pre

如下圖:

CSS 文字換行、文字強制不換行語法

white-space: nowrap 文字強制不換行

讓文字強制不換行。

語法:white-space: nowrap

如下圖:

CSS 文字換行、文字強制不換行語法

white-space: pre-wrap 保留空白,文字換行

保留空白,自動換行。

語法:white-space: pre-wrap

如下圖:

CSS 文字換行、文字強制不換行語法

white-space: pre-line 連續空白,取代成一個空白

自動將多個空白轉換成一個空白

語法:white-space: pre-line

如下圖:

CSS 文字換行、文字強制不換行語法

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *