解决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可能就将那串东西认做是一个字符了，因此不会换行吧