文字内容或标题过长,用 ... 进行省略的TD和DIV两种情况下的三种解决方案

最新推荐文章于 2021-12-14 01:05:42 发布

原创最新推荐文章于 2021-12-14 01:05:42 发布 · 6k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#div #firefox #opera #css #border

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用CSS实现文本的截断并以省略号显示，适用于DIV及TD元素。通过设置特定样式，如overflow:hidden、white-space:nowrap及text-overflow:ellipsis，确保在不同浏览器下的一致性表现。

DIV下的解决方案:

<html>
<head>
<title>Style5.cn</title>
<style type="text/css">
/* 公共样式 */
body { font-size: 14px; font-family:"宋体"; }
a { color: Black; text-decoration: none; }
a:hover { color: Blue; }
/* 截取文字的盒子 */
.autocut {
width:200px;
border:1px solid #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>
<div class="autocut">
<a href="http://www.style5.cn" title="TOP10热榜在图片上的半透明阴影效果">TOP10热榜在图片上的半透明阴影效果</a><br />
<a href="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下的解决方案(二):

<table width="200" border="1" style="table-layout:fixed;">
<tr>
<td width="80" style="width:80px;overflow: hidden;text-overflow:ellipsis">
<nobr>我是一个兵，来自老百姓</nobr></td>
<td> </td>
<td> </td>
</tr>
</table>