css强制不换行，超出用省略号显示

DIV下的解决方案: 
 
 
 
 
 
 

 
TOP10热榜在图片上的半透明阴影效果
 
说说最近读的书：无懈可击的Web设计
 

 
 
 
上面的这种方案，在 IE7 和 Opera 中应该能够完美的体现出他的效果了。但是 Firefox 目前并不支持 CSS3 中的 text-overflow:ellipsis，所以这种方法还是有缺陷的，算是不完全版。 

另外，在连接的 title 标签里加入完整的文章标题，这样想知道具体内容的浏览者就可以将鼠标放在连接上，看到完整的标题了。 
解释一下起到关键作用的几行代码： 
overflow:hidden; 
/* 隐藏超出容器范围的文字 */ 
white-space:nowrap; 
/* 强制文字将不自动换行 */ 
text-overflow:ellipsis; 
/* 如果文字超出范围，将使用省略号标示出来 */ 
-o-text-overflow:ellipsis; 
/* Opera 的私有属性，功能同上 */ 
-icab-text-overflow: ellipsis; 
-khtml-text-overflow: ellipsis; 
-moz-text-overflow: ellipsis; 
/* 目前这段代码无效，为 Firefox 预留 */ 
-webkit-text-overflow: ellipsis; 
TD下的解决方案(一): 
1.只需要将表格宽度固定,然后在表格的Css定义中加入:table { 
width:484px; 
table-layout:fixed; 
}2.然后在表格单元格的Css定义中加入:td { 
   overflow:hidden; 
   text-overflow:ellipsis; 
} 
TD下的解决方案(二): 
解决了在IE7下，JS调整宽度后，TD下的解决方案(一)失效的问题。 
 
 
 
 
 
 

我是一个兵，来自老百姓

行业门户()文章，希望大家可以留言建议