解決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可能就將那串東西認作是一個字符了,所以不會換行吧


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM