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>

相关推荐