多行文本溢出省略

多行文本溢出的时候，我们可以分为两种情况：

基于高度截断

伪元素 + 定位

核心的css代码结构如下：

position: relative：为伪元素绝对定位

overflow: hidden：文本溢出限定的宽度就隐藏内容）

position: absolute：给省略号绝对定位

line-height: 20px：结合元素高度,高度固定的情况下,设定行高, 控制显示行数

height: 40px：设定当前元素高度

::after {} ：设置省略号样式

代码如下所示：

<style>

p{overflow:hidden;line-height:40px;width:400px;height:40px;border:1pxsolid red;text-overflow:ellipsis;white-space:nowrap; }

</style>

<p这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本</p>

基于行数截断

纯css实现也非常简单，核心的css代码如下：

-webkit-line-clamp: 2：用来限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他的WebKit属性）

display: -webkit-box：和1结合使用，将对象作为弹性伸缩盒子模型显示

-webkit-box-orient: vertical：和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式

overflow: hidden：文本溢出限定的宽度就隐藏内容

text-overflow: ellipsis：多行文本的情况下，用省略号“…”隐藏溢出范围的文本

<style>

p{width:400px;border-radius:1pxsolid red;-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis; }

</style>

<p>

这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本 这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本

</p>