CSS---解決文本溢出，換行

當咱們設置個人的div，或者其它文本框固定寬度以後，文本內容過多就會出文本溢出（顯示在區域外面，不換行的狀況）。

這時咱們可使用Css中的幾個屬於來解。有如下的三個屬於能夠解決問題：

 

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

word-break: normal|break-all|keep-all;

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

 

 

2，overflow 屬性規定當內容溢出元素框時發生的事情。

值	描述
visible	默認值。內容不會被修剪，會呈如今元素框以外。
hidden	內容會被修剪，而且其他內容是不可見的。
scroll	內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto	若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

 

 

3，white-space 屬性設置如何處理元素內的空白。

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

 

我使用的是 word-break:break-all來實現文本的換行，由於咱們字符是中文致使換行會出現問題。使用overflow會出滾動條，若是是

容許有滾動條可使用。white-space是屬於文本里的空白字符，若是文本里含有不少的空白字符咱們能夠考慮加上該屬性。