解決table td裏面長串數字或字母不換行的問題

在html中，常常要用到table標籤，通常狀況下，table下面的td元素裏的東西都是漢字或者說是漢字、字母、數字的混合，在這種狀況下，不設置table的寬度，也就是table寬度自適應的時候，瀏覽器若是縮小的話，table裏面的內容會跟隨瀏覽器的寬度換行。這個你們都清楚。可是若是td裏面的內容都是純數字或者純字母，並且沒有空格，會是什麼狀況呢？下面看看：

 

<table border="1">
	<tr>
    	<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    </tr>
    <tr>
    	<td>1111111111111111111111111111111111111111111111111111111111111111111111111</td>
    </tr>
    <tr>
    	<td>CSDN創立於1999年，是中國最大的IT社區和服務平臺，爲中國的軟件開發者和IT從業者提供知識傳播、職業發展、軟件開發等全生命週期服務，知足他們在職業發展中學習及共享知識和信息、創建職業發展社交圈、經過軟件開發實現技術商業化等剛性需求。</td>
    </tr>
</table>

 

 

能夠看到，有漢字的td會換行，可是若是是純數字和純字母的td沒有換行，瀏覽器出現的橫向的滾動條。固然，這個問題很是容易解決，就是給table添加一個樣式：

 

style="word-break:break-all;"

這樣就能夠了。看看添加樣式後的效果：

 

 

<table border="1" style="word-break:break-all;">
	<tr>
    	<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    </tr>
    <tr>
    	<td>1111111111111111111111111111111111111111111111111111111111111111111111111</td>
    </tr>
    <tr>
    	<td>CSDN創立於1999年，是中國最大的IT社區和服務平臺，爲中國的軟件開發者和IT從業者提供知識傳播、職業發展、軟件開發等全生命週期服務，知足他們在職業發展中學習及共享知識和信息、創建職業發展社交圈、經過軟件開發實現技術商業化等剛性需求。</td>
    </tr>
</table>

 

無論是數字、字母仍是漢字的td，都換行了。可是，若是是純符號（標點符號），這個就不行了，相信也不會有這樣的需求吧。

若是td裏面的內容都是純數字或者純字母，並且沒有空格，td可能就將那串東西認做是一個字符了，因此不會換行吧