多行溢出裁剪省略号

记录一下:

.two-line { overflow: hidden; display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */ -webkit-line-clamp: 2; /* 行数,值可以改,表示展示X行后多余的缩略展示 */ -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */ word-break: break-all; }

注意:这个方式有兼容问题

如果考虑兼容,建议联合js/后端文本裁剪

省略号

省略号

单行溢出裁剪省略号

这个就没有啥兼容问题

.one-line { text-overflow: ellipsis; overflow: hidden; word-break: break-all; white-space: nowrap; }

欢迎关注拓行公众号,分享各种技术博客文章

拓行——奋勇进取,开拓未来,砥砺前行

最后修改:2025 年 06 月 30 日
如果您对各种技术博客文章感兴趣,欢迎关注拓行公众号,分享各种专业技术知识~