CSS 文字空白、換行與強迫不換行

York Chen

·

Follow

2 min read

·

Aug 12, 2020

--

Share

• 標題固定一行 ，移除連續空白與換行符號/r/n

.item_subtitle{
    white-space:nowrap;
  }

• 標題保留空白，但自動換行

.item_subtitle{
    white-space:pre-wrap;
  }

• 標題連續空白，取代成一個

.item_subtitle{
    white-space: pre-line;
  }

• 保留原始資料的空白與換行，與HTML的<pre>相同

.word{
    white-space:pre;
  }

• 若一個英文單字過長，超過畫面的寬度，將單字強迫斷字換行。

.word{
    word-break: break-all;
  }

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

.word{
    word-wrap:break-word;
  }

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

.word{
    word-wrap:break-word;
  }

參考

white-space

word-break

word-wrap