栏目:Java Web(<--点此查看更多)Java Web 开发相关技术及框架,JSP|Servlet|Javabean|SSH|EJB|HTML|CSS|JavaScript等
  • HTML 中连续的英文字符/数字的自动换行问题

  • Thu Mar 14 04:14:25 CST 2013 编程者 我要收藏(...) 评论 ...
  • HTML 中连续的英文字符/数字的自动换行问题
  • 之前处理过 div 中连续英文字符自动换行的问题,但今天遇到了一个比较特殊的问题,在给 div 添加完 word-wrap: break-word; white-space: normal; 两个样式之后仍然不能实现自动换行。经查是因为 div 放到了 table 里面。最终在 table 样式中添加 table-layout: fixed; 最终实现连续字符的自动换行。
    具体代码如下:
    <table border="1" style="table-layout: fixed;">
        <tr>
            <td>
                <div style="word-wrap: break-word; white-space: normal;">
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                </div>
            </td>
        </tr>
    </table>
    如遇到一行中有多个 td 的时候,table-layout:fixed 样式可能会影响预设定的 td 的宽度,这个时候建议将代码做如下改造:
    <table border="1" style="table-layout: fixed;">
        <tr>
            <td style="word-wrap: break-word; white-space: normal;">
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
                    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
            </td>
        </tr>
    </table>
  • 信息来源:http://www.bianchengzhe.com (举报这篇文章)
  • 好评(...) 中评(...) 差评(...)