当前位置导航:炫浪网>>网络学院>>网页制作>>Dreamweaver教程

为什么表格会被撑大?

解决思路:
这个问题一般发生在单元格内容中出现不间断的英文或者标点符号时就不会自动换行,表格被撑得很大,所以问题的关键在于设置让它自动换行或强制换行。 
具体步骤:
给表格定义以下CSS属性:

table-layout:fixed;word-wrap:break-word;word-break:break-all

完整代码示例:

    <table style="table-layout:fixed;word-wrap:break-word;word-break:break-all;border:1px solid #000000;width:200px">
    <tr><td><script>document.write(new Array(267).join("!"))</script></td></tr>
    </table>

提示:代码
<script>document.write(new Array(267).join("!"))</script>

的作用在浏览器中输出266个叹号"!"
特别提示
未定义CSS之前,单元格内的内容不会自动换行,而定义之后在定义的宽度边界外强制换行,效果分别如图 1.2.30、图1.2.31所示。


图1.2.30 内容不换行的表格

图 1.2.31 强制内容换行的表格

特别说明


本例用到表格的CSS属性 table-layout 、word-wrap和word-break 属性。
table-layout 设置表格的布局算法。fixed:固定算法。
    word-break 设置单词内的换行行为,特别是对象中出现多语言的情况。break-all:依照亚洲语言和非亚洲语言的文本规则,允许在字内换行,也允许非亚洲语言文本行的任意字内断开。
    word-wrap 设置当当前行超过指定容器的边界时是否断开转行。break-word:内容将在边界内换行。
相关内容
赞助商链接