小程序文本溢出隐藏

CSS与JS文本显示技巧

最新推荐文章于 2024-02-22 10:27:36 发布

原创最新推荐文章于 2024-02-22 10:27:36 发布 · 2.9k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了一种使用CSS样式来实现多行及单行文本省略显示的方法，并提供了.note_itemtext和.note2_itemtext两个样式的具体实现细节。这些样式能够帮助前端开发者更好地控制页面中文本的显示效果。

多行文本

.note_item text{ display: -webkit-box; font-size:28rpx; color:#000000; line-height: 40rpx; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp:3; overflow: hidden; text-overflow:ellipsis; }

单行文本

.note2_item text{ display: block; font-size:28rpx; color:#000000; line-height: 40rpx; height: 120rpx; overflow: hidden; white-space: nowrap; text-overflow:ellipsis; }

tip:必须要有宽度