css强制不换行，超出用省略号显示
impress 2012-11-29
DIV下的解决方案:
<html>
<head>
<title>Style5.cn</title>
<styletype="text/css">
/*公共样式*/
body{font-size:14px;font-family:"宋体";}
a{color:Black;text-decoration:none;}
a:hover{color:Blue;}
/*截取文字的盒子*/
.autocut{
width:200px;
border:1pxsolid#333;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-icab-text-overflow:ellipsis;
-khtml-text-overflow:ellipsis;
-moz-text-overflow:ellipsis;
-webkit-text-overflow:ellipsis;
}
</style>
</head>
<body>
<divclass="autocut">
<ahref="http://www.style5.cn"title="TOP10热榜在图片上的半透明阴影效果">TOP10热榜在图片上的半透明阴影效果</a><br/>
<ahref="http://www.style5.cn"title="说说最近读的书：无懈可击的Web设计">说说最近读的书：无懈可击的Web设计</a><br/>
</div>
</body>
</html>
上面的这种方案，在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下的解决方案(一)失效的问题。
<tablewidth="200"border="1"style="table-layout:fixed;">
<tr>
<tdwidth="80"style="width:80px;overflow:hidden;text-overflow:ellipsis">
<nobr>我是一个兵，来自老百姓</nobr></td>
<td></td>
<td></td>
</tr>
</table>
