css控制文本超出显示省略号

最新推荐文章于 2025-08-06 16:35:17 发布

Astorboy

最新推荐文章于 2025-08-06 16:35:17 发布

阅读量261

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_25000935/article/details/84138013

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了使用CSS处理单行和多行文本溢出的方法，包括如何使超出部分显示为省略号。针对不同浏览器的兼容性问题，提供了一种适用于多浏览器的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单行文本

先来简单说一下单行文本超出显示省略号的方法,大家基本都会了:

Element {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

含义什么的在此就不额外赘述了

多行文本

Element {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

但是这种方法有一个缺点, 它只能兼容谷歌内核的浏览器, 对于 **火狐/ie/欧朋** 等浏览器就行不通了

所以需要另一种方法来处理多浏览器的兼容问题

Element {
  position: relative;
  line-height: 24px;
  height: 72px;
  overflow:hidden;
}
	
Element:after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
}

将height设置为line-height的整数倍,防止超出的文字露出
如果需要用ie7及以下版本的浏览器需要更换 after 伪类,因为ie7及以下版本的浏览器不显示 content 中的内容