【全解析】關於word-wrap、word-break、white-space三種CSS字符換行處理

引入

文本換行的問題沒關係, 但遇到真要命。多種換行隨緣嘗試每每是大多人的解決方案。

因此今天就來整理一下常見的文本換行。同時瞭解一下每種換行的應用場景

三種文本換行的前置知識

咱們拿三種常見的文本換行舉例(word-wrap、word-break、white-space）

首先咱們整理出對應的參數表,方便查看。(不整理兼容性很差的屬性，只列舉經常使用屬性)

1）word-wrap

值	描述
normal	單詞結束處正常換行
break-word	行內沒有多餘的位置容納該單詞到結尾時, 單詞會被分割換行。

2） word-break

值	描述
normal	使用默認換行規則
break-all	對於non-CJK (CJK 指中文/日文/韓文) 文本，可在任意字符間斷行。
keep-all	CJK 文本不斷行。 Non-CJK 文本表現同 normal。

**CJK文本：**中日韓統一表意文字（CJK Unified Ideographs）。CJK 是中文（Chinese）、日文（Japanese）、韓文（Korean）三國文字的縮寫。顧名思義，它可以支持這三種文字。（摘自百度百科）

3) white-space

值	描述
normal	連續的空白符會被合併，換行符會被看成空白符來處理。填充line盒子時，必要的話會換行。
nowrap	和 normal 同樣，連續的空白符會被合併。但文本內的換行無效。
pre	連續的空白符會被保留。在遇到換行符或者<br>元素時纔會換行。
pre-wrap	連續的空白符會被保留。在遇到換行符或者<br>元素，或者須要爲了填充line盒子時纔會換行。
pre-line	連續的空白符會被合併。在遇到換行符或者<br>元素，或者須要爲了填充line盒子時會換行。

以上內容摘自MDN web docs

一點點準備工做

爲了方便理解，我按照使用四種文字類型進行測試, 分別是 ①不含有空白符(空格\水平製表符)的中文(cjk文字)

<pre>這是一段中文測試文字這段文字不包含空白符水平製表符是一段很長很長很長很長的文字</pre>
複製代碼

①含有空白符(空格\水平製表符)的中文(cjk文字)

<pre>這是一段中文測試文字這段文字 包含空白符水平製表符 而且還有多個空白符      是一段很長很長很長很長的文字</pre>
複製代碼

③含有空白符的英文長句(非cjk文字)

<pre>Hi! My name is Tinker. I'm glod to met you. So let's us to do something. Is ok?</pre>
複製代碼

④不含空白符的長句(非cj文字)

<pre>
Hi!MynameisTinker.I'mglodtometyou.Solet'sustodosomething.Isok?
</pre>
複製代碼

準備就緒！那麼讓咱們開始吧~

1、word-wrap

現象

normal:

break-word:

總結:

1. normal和break-word都會合並空白符
2. normal對長單詞不會進行換行, break-word會換行。
3. 漢字(CJK文字)會自動換行,英文(非CJK文字)不會自動換行。

2、word-break

現象

normal

break-all

keep-all

總結

1. 三種方式都會合並多餘空白符。
2. break-all 會使全部類型文字超出自動換行
3. keep-all 會使CJK文字不換行。非CJK文字表現等同於normal。 同時CJK文字會由於換行符、空白符、水平製表符換行。

上訴例子可能不明瞭：看這個

代碼：

表現：

3、white-space

現象

normal

norwrap

pre-wrap

pre

pre-line

總結

1. nowrap會使因此文字不換行並會合並多個空白符。
2. pre-wrap會保留因此空白符(包括代碼中的回車形成的空白或換行)。而且填充盒子時cjk文字會自動換行，非cjk文字單個長單詞不會換行。

   

3. pre會保存多個空白符(包括代碼中的回車形成的空白或換行)，且全部文字不會換行。 4.pre-line。會保留空白符(包括代碼中的回車形成的空白或換行)，但合併多個空白符。填充盒子時cjk文字會自動換行，非cjk文字單個長單詞不會換行。