css 溢出隐藏显示省略号

单行文字超出隐藏：

要使用CSS使超出容器的文本隐藏并以省略号显示，可以使用以下属性：

1. overflow:hidden: 设置为 hidden 以隐藏超出容器的内容。

2. text-overflow:ellipsis: 设置为 ellipsis 以显示省略号。

3. white-space:nowrap: 设置为 nowrap 防止文本换行。

.ellipsis {
  width:100px; /* 需要设置一个宽度 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}复制

多行文字超出隐藏：

CSS3引入了-webkit-line-clamp属性，这是一个非标准的属性，需要结合 display: -webkit-box 和 -webkit-box-orient

属性解析

1. display: -webkit-box：将元素设置为弹性盒子模型。
2. -webkit-box-orient: vertical：设置弹性盒子的方向为垂直。
3. -webkit-line-clamp: 3：限制在一个块元素显示的文本的行数。这里设置为3行。
4. overflow: hidden：隐藏超出容器的部分。
5. text-overflow: ellipsis：在文本溢出时显示省略号。

.ellipsis {
  width: 100px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}复制