纯CSS实现“文本溢出截断省略”的几种方法

最新推荐文章于 2022-08-19 11:22:08 发布

水蜜桃那么甜

最新推荐文章于 2022-08-19 11:22:08 发布

阅读量502

点赞数

分类专栏： important

本文链接：https://blog.csdn.net/Lemontree_fu/article/details/105200738

版权

本文详细介绍了三种纯CSS实现文本溢出截断的方法：单行文本溢出省略、多行文本溢出省略（-webkit-line-clamp）以及多行文本溢出省略（伪元素 + 定位）。每种方法都有其优缺点和适用场景，例如单行截断具有良好的浏览器兼容性，而多行截断则依赖于WebKit属性。

摘要由CSDN通过智能技术生成

单行文本溢出省略

核心 CSS 语句

overflow: hidden；（文字长度超出限定宽度，则隐藏超出的内容）
white-space: nowrap；（设置文字在一行显示，不能换行）
text-overflow: ellipsis；（规定当文本溢出时，显示省略符号来代表被修剪的文本）

优点

兼容性好，对各大主流浏览器有好的支持
响应式截断，根据不同宽度做出调整
文本溢出范围才显示省略号，否则不显示省略号
省略号位置显示刚好

短板

只支持单行文本截断，并不支持多行

适用场景

适用于单行文本溢出显示省略号的情况

<div class="demo">
      床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光
</div>

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

核心 CSS 语句

overflow: hidden；（文本溢出限定的宽度就隐藏内容）
-webkit-line-c

关注

专栏目录