CSS全兼容实现文字省略标记

最新推荐文章于 2025-11-17 14:35:18 发布

原创最新推荐文章于 2025-11-17 14:35:18 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #opera #firefox #float #ie

Web开发同时被 3 个专栏收录

24 篇文章

订阅专栏

HTML

8 篇文章

订阅专栏

CSS

5 篇文章

订阅专栏

本文介绍了一种使用CSS实现文本溢出时自动添加省略号的方法。通过设置特定样式，可以在限定宽度内显示文本并优雅地处理超出部分，适用于网页布局中对文字长度有固定要求的情况。

textoverflow a {

	display:block;

	width:120px;

	margin: 0px 0px 0px 3px;

	white-space: nowrap;

	overflow: hidden;

	float: left;

	-o-text-overflow: ellipsis;    /**//* for Opera */

	text-overflow: ellipsis;        /**//* for IE */

}

.textoverflow:after{ content: ""; }/**//* for Firefox */

@media all and (min-width: 0px){ .textoverflow:after{ content:""; }/**//* for Opera */ }