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

　

溢出隐藏

前言

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

解决方案

HTML:

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

CSS:

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

效果图：

参考资料

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

如果你有什么疑问或想法，欢迎留言评论，或者扫描下方二维码，与我取得联系~

相关阅读

css3自定义滚动条样式写法

欢迎访问我的个人博客 http://xiaolongwu.cn/ 先简单介绍一下各个属性 ::-webkit-scrollbar ：滚动条整体部分，其中的属性

JavaScript中的style.cssText使用教程

1. cssText 本质是什么？cssText 的本质就是设置 HTML 元素的 style 属性值。代码如下:document.getElementById("d1").style.cssTe

css中!important的用法

!important为开发者提供了一个增加样式权重的方法。应当注意的是!important是对整条样式的声明，包括这个样式的属性和属性值 <st

Qt工作笔记-QGraphicsScene练习【Qt图形框架练习】

程序运行如下图所示：程序结构如下：代码如下：directitem.h#ifndef DIRECTITEM_H #define DIRECTITEM_H #include <QObject> #include

怎么给文件加密并加密后隐藏起来?

生活中，我们的个人电脑（以下用PC代称）上总会有些机要、隐秘的文件，这些文件我们不想让他人见到或者不能让他人见到看。对于相当重要的