文本超出范围后展示省略号

最新推荐文章于 2025-02-15 11:15:49 发布

原创最新推荐文章于 2025-02-15 11:15:49 发布 · 349 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #多行换行 #省略号

css 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用CSS实现单行或多行文本溢出时显示省略号的效果，包括white-space、overflow和text-overflow属性的用法，以及多行省略号的特殊处理方式。

单行超出范围展示省略号

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

多行超出范围后展示省略号（以两行为例）

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
/* 关闭autoprefixer的自动删除功能，否则-webkit-box-orient会被webpack打包干掉，这是autoprefixer插件的问题 */
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
-webkit-line-clamp: 2;
text-overflow:ellipsis;

注意：多行时候的标签需要设置高度