zoukankan      html  css  js  c++  java
  • 解决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可能就将那串东西认作是一个字符了,所以不会换行吧

  • 相关阅读:
    [js高手之路] html5新增的定时器requestAnimationFrame实战进度条
    [js高手之路] html5 canvas系列教程
    [js高手之路] html5 canvas系列教程
    [js高手之路] html5 canvas系列教程
    [js高手之路] html5 canvas系列教程
    [js高手之路] html5 canvas系列教程
    [js高手之路] html5 canvas系列教程
    [js高手之路] html5 canvas系列教程
    [js高手之路] html5 canvas系列教程
    [js高手之路] html5 canvas系列教程
  • 原文地址:https://www.cnblogs.com/wdlhao/p/4517777.html
Copyright © 2011-2022 走看看