微信小程序文字超出显示省略号

刺心疯

于 2019-06-19 14:24:17 发布

阅读量7k

点赞数 7

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_42363090/article/details/92830520

微信小程序专栏收录该内容

121 篇文章 ¥69.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了微信小程序中处理文字超出显示省略号的方法。通过设置容器固定宽度或使用CSS属性`-webkit-line-clamp`限制显示行数，实现内容超出部分以省略号隐藏。注意，textarea标签不支持此样式。

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

如果容器有固定的宽度，加入以下代码即可。

view {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

如若容器不需要有固定的宽高，只需加入以下代码即可。
无需指定高度，只需指定最多显示几行，属性 -webkit-line-clamp。
本示例中最多显示3行，超出3行后，在第三行末尾用省略号代替显示。

view {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

Ps：textarea标签不支持