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是屬於文本里的空白字符，如果文本里含有很多的空白字符我們可以考慮加上該屬性。