自动换行疑问

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

实现换行的要领

最佳CSS定义换行代码

.wrap { table-layout:fixed; word-break: break-all; overflow:hidden; }

这里 overflow:hidden;或者 auto；

=================================================================

对于div,p等块级元素

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

html

css

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

1.(IE阅读

器)连续的英文字符和阿拉伯数字,运用

word-wrap : break-word ;或者word-break:break-all;实现强制断行

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

或者

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

效果：可以实现换行

2.(Firefox阅读

器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有处理

这个疑问

,我们只有让超出边界的字符潜藏

或者,给容器添加滚动条

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

效果：容器正常，内容潜藏

对于table

http://www.knowsky.com/

1. (IE阅读

器)运用

table-layout:fixed;强制table的宽度,多余内容潜藏

效果：潜藏

多余内容

2.(IE阅读

器)运用

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

效果：可以换行

3. (IE阅读

器)在td,th中嵌套div,p等采用上面提到的div,p的换行要领

4.(Firefox阅读

器)运用

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

overflow:hidden;潜藏

超出内容，这里overflow:auto;不能

起作用

效果：潜藏

多于内容

5.(Firefox阅读

器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的要领

运行代码框

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

下面是提到的例子的效果

字符换行

table,td,th,div { border:1px green solid;}

code { font-family:"Courier New", Courier, monospace;}

div

All white-space:normal;

IE \ word-wrap : break-word ;

IE \ word-break:break-all;

Firefox/ word-break:break-all; overflow:auto;

table

table-layout:fixed;

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

FF \ table-layout:fixed; overflow:hidden;