css 溢出隐藏显示省略号
单行文字超出隐藏：
要使用CSS使超出容器的文本隐藏并以省略号显示，可以使用以下属性：
-
overflow:hidden: 设置为hidden以隐藏超出容器的内容。 -
text-overflow:ellipsis: 设置为ellipsis以显示省略号。 -
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
属性解析
- display: -webkit-box：将元素设置为弹性盒子模型。
- -webkit-box-orient: vertical：设置弹性盒子的方向为垂直。
- -webkit-line-clamp: 3：限制在一个块元素显示的文本的行数。这里设置为3行。
- overflow: hidden：隐藏超出容器的部分。
- text-overflow: ellipsis：在文本溢出时显示省略号。
.ellipsis {
width: 100px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
}