TABLE自动换行 解决不能换行撑开等有关问题

table不能换行问题 一般是:
一行里面数字或是字母 还或者结尾有多个感叹号导致 table不能换行

中文默认的会自动换行的

字母不能换行问题
style="table-layout:fixed;word-break:break-all;" 

在单元格属性里加入上面这句,如:
<td style="table-layout:fixed;word-break:break-all;">

用表格做网页排版的时候,一般都能正常使用。偏偏有时会碰到一段连续的英文词或者一堆感叹号(!!!)把网页就撑开的现象:(

总结了一下,只要在CSS中定义了如下句子,可保网页不会再被撑开了。

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法

对于div,p等块级元素

正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行

html

<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>

css

#wrap{white-space:normal; width:200px; }


IE浏览器

连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行

html

<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>


css

#wrap{word-break:break-all; width:200px;}

或者

#wrap{word-wrap:break-word; width:200px;}


Firefox浏览器
连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条

html

<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>


css

#wrap{word-break:break-all; width:200px; overflow:auto;}


对于table元素
IE浏览器

1. 使用 table-layout:fixed;强制table的宽度,多余内容隐藏

<table style="table-layout:fixed" width="200">  <tr>  <td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss  </td>  </tr>  </table>


2. 使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行

<table width="200" style="table-layout:fixed;">  <tr>  <td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890  </td>  <td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890  </td>  </tr>  </table>


3.在td,th中嵌套div,p等采用上面提到的div,p的换行方法

Firefox浏览器

1. 使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行,使用overflow:hidden;隐藏超出内,这里overflow:auto;无法起作用

<table style="table-layout:fixed" width="200">  <tr>  <td width="25%"  style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>  <td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>  </tr>  </table>


2.在td,th中嵌套div,p等采用上面提到的对付Firefox的方法

最后,这种现象出现的几率很小,但是不能排除网友的恶搞。 

table{table-layout: fixed;}
td(word-break: break-all; word-wrap:break-word;) 


注释一下:

1.第一条table{table-layout: fixed;},此样式可以让表格中有!!!(感叹号)之类的字符时自动换行。

2.td{word-break: break-all},一般用这句这OK了,但在有些特殊情况下还是会撑开,因此需要再加上后面一句(word-wrap:break-word;)就可以解决。此样式可以让表格中的一些连续的英文单词自动换行。


—— 完 ——
相关推荐
评论

立 为 非 似

中 谁 昨 此

宵 风 夜 星

。 露 , 辰

文章点击榜

细 无 轻 自

如 边 似 在

愁 丝 梦 飞

。 雨 , 花