css之——如何讓文字強制換行

標籤：ges   src   相容   例子   出錯   ide   自動   解決方案   沒有   

　　

 　　我們在編寫html時，

　　有時候，常常需要在移動端用到一些table的屬性，來呈現一些資料。如果說我們的資料內不含連續的數字或字母時，顯示是不會出錯的。

　　例：

     

　　可是如果我們要呈現的資料為數字或長字母資訊時，常常會出現這樣的情況。

　　例：

　　

　　文字並沒有像我們預期那樣換行，設定的寬度無效了。

 

　　這是什麼原因呢？

　　　　原因就是瀏覽器在解析我們頁面的時候，如果我們給定他連續的數字或字母，瀏覽器不會分開解析，而是會直接將這一長串當成一個單詞，因此我們設定的寬度就失效了，不會自動切斷字串而進行換行。

 

　　解決方案：

　　　　如果我們要表格中的文字強制換行(尤其是在一長串英文文本，並且中間無空格分隔的情況下)，以達到使過長的文字不撐破表格的目的，就需要在樣式中添加以下兩行代碼：

1 word-wrap: break-word;2 word-break: break-all;

 

　　這兩行代碼起什麼用呢？

　　　　word-wrap:break-word; 和 word-break:break-all 解析：

　　　　1，word-break:break-all

　　　　//允許在單詞內換行。給定div寬，字元超過指定寬度就會自動換行。如果該行末端有個英文單詞很長（confidence等），它會把單詞截斷，變成該行末端為con(confidence的前半部分)，下一行為fidence（fidence的後端部分）。

　　　　2，word-wrap:break-word

　　　　//允許長單詞換行到下一行。例子與上面一樣，但區別就是它會把confidence整個單詞看成一個整體，如果該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，不會截斷單詞。

 

　　相容性問題：

　　　　word-break和word-wrap屬性都支援所有主流瀏覽器。

　　　　

css之——如何讓文字強制換行