总是一些文章说要强制换行,很少提到说如何不换行。
一般都会使用word-break: keep-all;使得强制不换行。
![](https://i-blog.csdnimg.cn/blog_migrate/81178cc93a2a3bb5048d90d76e7ec935.gif)
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
< html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" lang ="en" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title > I don't want to have a new line
</ title >
< meta name ="description" content ="" >
< meta name ="author" content ="Yinkan" >
< link rel ="stylesheet" href ="./style.css" type ="text/css" media ="screen" >
</ head >
< body >
< table >
< tr >
< td > 不换行不换行不换行不换行 不换行不换行不换行不换行不换行不换 行不换行不换行不 换行不换行不换行不换行不换行不换行不换行不换行 </ td >
< td > 1111 </ td >
</ tr >
< tr >
< td > 222 </ td >
< td > 2222 </ td >
</ tr >
</ table >
</ body >
</ html >
< html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="en" lang ="en" >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=UTF-8" >
< title > I don't want to have a new line
</ title >
< meta name ="description" content ="" >
< meta name ="author" content ="Yinkan" >
< link rel ="stylesheet" href ="./style.css" type ="text/css" media ="screen" >
</ head >
< body >
< table >
< tr >
< td > 不换行不换行不换行不换行 不换行不换行不换行不换行不换行不换 行不换行不换行不 换行不换行不换行不换行不换行不换行不换行不换行 </ td >
< td > 1111 </ td >
</ tr >
< tr >
< td > 222 </ td >
< td > 2222 </ td >
</ tr >
</ table >
</ body >
</ html >
table
{
width
:
100%
;
border
:
1px solid #999
;
}
table td { word-break : keep-all ; }
table td { word-break : keep-all ; }
这在IE下可以用,但是在FireFox和Chrome下是无法达到预期效果的。
需要使用 white-space:nowrap;
table
{
width
:
100%
;
border
:
1px solid #999
;
}
table td { word-break : keep-all ; white-space : nowrap ; }
table td { word-break : keep-all ; white-space : nowrap ; }
才能显示正常(或者说,不正常,因为会打破原有的布局,并且突破父级元素的宽度)。
原文地址:http://www.cnblogs.com/liyinkan/archive/2010/10/28/1863382.html