学习链接

如何实现单行／多行文本溢出的省略样式？

单行、多行文本溢出隐藏

CSS 实现多行文本“展开收起”

单行／多行文本溢出的省略样式

HTML

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

CSS

p {
    width: 400px;
    border: 1px solid red;
}

单行省略

• overflow: hidden：文字长度超出限定宽度，则隐藏超出的内容

• text-overflow: ellipsis：规定当文本溢出时，显示省略符号来代表被修剪的文本

  • text-overflow: clip：规定当文本溢出时，裁剪溢出部分
• white-space: nowrap：设置文字在一行显示，不能换行

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

多行省略

• 多行文本主要是把white-space属性修改为使用-webkit-line-clamp，限制在一个块元素显示的文本的行数来实现的。

1. display: -webkit-box 设置 div 为弹性伸缩盒子模型。

2. -webkit-line-clamp: 2 可以把块容器中的内容限制为指定的行数。
   它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 -webkit-box-orient 属性设置成 vertical 时才有效果。

3. -webkit-box-orient 用来设置一个元素是水平还是垂直布局其内容。该特性是非标准的，使用时需要注意兼容性。

   1. 设置值为 vertical：设置伸缩盒子的子元素排列方式——从上到下垂直排列

p {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

注意：由于上面的三个属性都是 CSS3 的属性，没有浏览器可以兼容，所以要在前面加一个-webkit- 来兼容一部分浏览器。