CSS: 多行文本溢出隐藏（可自定义行数）

最新推荐文章于 2024-06-05 09:45:20 发布

置顶車句

最新推荐文章于 2024-06-05 09:45:20 发布

阅读量6.8k

点赞数 1

分类专栏：页面布局文章标签：文本溢出隐藏多行文本 CSS文本溢出文字显示行数显示行数设置

本文链接：https://blog.csdn.net/weixin_39015132/article/details/81142276

版权

2 篇文章 0 订阅

订阅专栏

多行文本溢出隐藏在前端是很常见的需求，例如文章的标题过长，需要超出两行后隐藏，显示省略号（…）。

HTML:

<div class="title">
    这是文章的标题，它有点长。
	这是文章的标题，它有点长。
	这是文章的标题，它有点长。
	这是文章的标题，它有点长。
	这是文章的标题，它有点长。
	这是文章的标题，它有点长。
	这是文章的标题，它有点长。
</div>

CSS:

.title{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    flex-direction: column;
}

效果图：

效果图

-webkit-line-clamp：限制在一个块元素显示的文本的行数。（了解更多）

嘘寒问暖不如打笔巨款~

关注