Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 css实现表格td 自动换行样式

css实现表格td 自动换行样式

发布时间:2020-05-10   编辑:www.jquerycn.cn
jquery中文网为您提供css实现表格td 自动换行样式等资源,欢迎您收藏本站,我们将为您提供最新的css实现表格td 自动换行样式资源
自动换行最简单的做法就是直接使用 word-wrap: break-word;word-break:break-all;了,这种对于ie浏览器是兼容的,但对于ff或其它浏览器好像有问题,下面一起来看看。

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

 代码如下 复制代码

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

<td style="word-wrap: break-word;word-break:break-all;" width="200"></td>

对于div

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

 代码如下 复制代码

#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}

<div id=”wrap”>ddd1111111111111111111111111111111111</div>

效果:可以实现换行

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; }

<div id=”wrap”>ddd3333333333333333333333333333333333333</div>

效果:容器正常,内容隐藏

对于table

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

 代码如下 复制代码

<style>
.tb{table-layout:fixed}
</style>

<table class=”tbl” width=”80″>
<tr>
<td>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

效果:可以换行

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

 代码如下 复制代码

<style>
.tb {table-layout:fixed}
</style>

<table class=”tb” width=”80″>
<tr>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

效果:可以换行

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

 代码如下 复制代码

<style>
.tb{table-layout:fixed}
</style>

<table class=”tb” width=80>
<tr>
<td width=25% nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>

效果:两个td均正常换行

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

 代码如下 复制代码

<style>
.tb {table-layout:fixed}
.td {overflow:hidden;}
</style>

<table class=tb width=80>
<tr>
<td width=25% class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</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与兼容性进行了一些分析,最后发现这个兼职那个不兼容了,是一个头痛的事情。

您可能感兴趣的文章:
CSS禁止文本自动换行代码
正则表达式 – 简介
javascript实现隔行变色函数代码一例
css实现表格td 自动换行样式
HTML 媒体(Media)
Js实现表格隔行变色,鼠标经过时高亮显示的代码
Js表格隔行换色(隔行变色)代码一例
js 隔行变色与鼠标悬停自动变色的实现代码
php常用函数有必要背吗
网页制作之如何管理好网站的css样式

[关闭]