其他分享
首页 > 其他分享> > 微信小程序的 WXSS 中怎么实现单行文本超过部分显示省略号?

微信小程序的 WXSS 中怎么实现单行文本超过部分显示省略号?

作者:互联网

可以使用以下 CSS 样式:

.ellipsis {
  white-space: nowrap;      /* 不换行 */
  overflow: hidden;         /* 超出部分隐藏 */
  text-overflow: ellipsis;  /* 超出部分用省略号表示 */
}

CSS

然后在您的 WXML 文件中,可以将这个类应用到需要的文本元素上。例如:

<view class="ellipsis">这是一个很长的文本,会在超过一行时显示省略号</view>

XML

这样设置后,当文本长度超出容器宽度时,就会显示省略号。

标签:
来源: