小程序文本溢出隐藏

最新推荐文章于 2025-06-26 09:37:39 发布

buddha_coder

最新推荐文章于 2025-06-26 09:37:39 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/buddha_coder/article/details/81486901

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

多行文本

.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:必须要有宽度