html tr可以折行样式,css实现表格td 自动换行样式

自动换行最简单的做法就是直接使用word-wrap: break-word;word-break:break-all;了，这种对于ie浏览器是兼容的，但对于ff或其它浏览器好像有问题，下面一起来看看。

给长地址的单元格应用样式：

代码如下

word-wrap: break-word;word-break:break-all;

对于div

1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。

代码如下

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

或者

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

ddd1111111111111111111111111111111111

效果：可以实现换行

2.(Firefox浏览器)white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法，只能隐藏或者加滚动条，当然不加滚动条效果更好！

代码如下

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

或者

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

ddd3333333333333333333333333333333333333

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

对于table

1. (IE浏览器)使用样式table-layout:fixed；

代码如下

.tb{table-layout:fixed}

< /style>

< tr>

< td>abcdefghigklmnopqrstuvwxyz 1234567890

< /td>

< /tr>

< /table>

效果：可以换行

2.(IE浏览器)使用样式table-layout:fixed与nowrap

代码如下

.tb {table-layout:fixed}

< /style>

< tr>

< td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890

< /td>

< /tr>

< /table>

效果：可以换行

3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap

代码如下

.tb{table-layout:fixed}

< /style>

< tr>

< td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890

< /td>

< td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890

< /td>

< /tr>

< /table>

效果：两个td均正常换行

3.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div

代码如下

.tb {table-layout:fixed}

.td {overflow:hidden;}

< /style>

< tr>

< td width=25% class=td nowrap>

< div>abcdefghigklmnopqrstuvwxyz 1234567890

< /td>

< td class=td nowrap>

< div>abcdefghigklmnopqrstuvwxyz 1234567890

< /td>

< /tr>

< /table>

这里单元格宽度一定要用百分比定义

效果：正常显示，但不能换行(注：在FF下还没有能使容器内容换行的好方法，只能用overflow将多出的内容隐藏，以免影响整体效果)

CSS样式解决英文换行断词问题

代码如下

* {word-wrap : break-word ;word-break : break-all ;}

/*word-wrap是控制换行的。

使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。

break-word是控制是否断词的。

normal是默认情况，英文单词不被拆开。

break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。

keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。(英文语句正常。)

ie下：

使用word-wrap:break-word;所有的都正常。

好了到了最后我们的td 自动换行也就分析完了，主要是针对表格与针对div与兼容性进行了一些分析，最后发现这个兼职那个不兼容了，是一个头痛的事情。