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;
}原文地址：https://blog.csdn.net/XYX8958/article/details/143799943
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！