为什么表格会被撑大?(转帖)

转自:为什么表格会被撑大?

这个问题我在一些比较著名的网站都曾看到过,如:开源数据库mysql免费使用和商业使用的区别(转载)中的评论:ps: 连续的":em16::em16:"表情符号撑破了原载地的页面。还有,有人在本站发的连续的英文字符的垃圾信息也是这样,会把表格撑得很宽。我不知道是什么原因。

不过,今天在网上偶然看到了这个问题的解决方法,虽然这篇文章也没有解释为什么会出现这种情况。为了以后碰到类似的需要的查阅方便,特将此文转载于此。

正文:

*************************************************************************************

为什么表格会被撑大?

Linuxmine收集整理  作者:linux宝库 (http://www.linuxmine.com)  时间:2007-01-20  收藏本站

来自:linux宝库 (http://www.linuxmine.com)

联系:linuxmine#gmail.com

分类:[基础教程]

解决思路:

这个问题一般发生在单元格内容中出现不间断的英文或者标点符号时就不会自动换行,表格被撑得很大,所以问题的关键在于设置让它自动换行或强制换行。

具体步骤:

给表格定义以下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:内容将在边界内换行。

不明白?欢迎到 linux论坛(http://bbs.linuxmine.com)参加讨论!

至强的Linux三证寒假班, 抢注热报!

·上一篇:Dreamweaver使用框架

·下一篇:Dreamweaver制作细线表格

*************************************************************************************

                                               转载完毕