table中强制不换行

总是一些文章说要强制换行，很少提到说如何不换行。

一般都会使用word-break: keep-all;使得强制不换行。

HTML

<! 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 >

 

 

table { width : 100% ; border : 1px solid #999 ; }
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 ; }

 

才能显示正常（或者说，不正常，因为会打破原有的布局，并且突破父级元素的宽度）。 

 

这年头什么奇特的想法都要去实现 …… 

转载于:https://www.cnblogs.com/liyinkan/archive/2010/10/28/1863382.html