CSS—換行

關於文本溢出換行問題，先看下涉及到換行的相關屬性，查看：http://www.w3school.com.cn

1、word-break

定義：word-break 屬性規定自動換行的處理方法。

值	描述
normal	使用瀏覽器默認的換行規則。
break-all	容許在單詞內換行。
keep-all	只能在半角空格或連字符處換行。

 

 

 

 

 

 

2、word-wrap

定義：word-wrap 屬性容許長單詞或 URL 地址換行到下一行。

值	描述
normal	只在容許的斷字點換行（瀏覽器保持默認處理）。
break-word	在長單詞或 URL 地址內部進行換行。

 

 

 

 

用於非CJK文本(如英文)的換行規則，word-wrap：break-word，容許長單詞換到下一行（拆分單詞）。

CJK(Chinese/Japanese/Korean)(中文/日文/韓文)

3、white-space

定義： white-space 屬性設置如何處理元素內的空白。

值	描述
normal	默認。空白會被瀏覽器忽略。
pre	空白會被瀏覽器保留。其行爲方式相似 HTML 中的 <pre> 標籤。
nowrap	文本不會換行，文本會在在同一行上繼續，直到遇到 <br> 標籤爲止。
pre-wrap	保留空白符序列，可是正常地進行換行。
pre-line	合併空白符序列，可是保留換行符。
inherit	規定應該從父元素繼承 white-space 屬性的值。

 

 

 

 

 

 

 

 

 

 

4、應用場景

若是對上面的屬性不是很清楚也無妨，請點：演示效果，runjs，下面是演示截圖：

1.默認狀況

 

2.word-break: break-all

 

3.word-wrap: break-word

 

4.white-space: nowrap

 

 博客園：CSS—換行