微信小程序使用vant以及在 app.wxss 中引入内置样式错误+内置样式实现多行文本溢出隐藏显示省略号

1,246 阅读1分钟

问题:微信小程序使用vant以及在 app.wxss 中引入内置样式错误

image.png 解决:使用相对路径

image.png

关于vant 内置样式

在 app.wxss 中引入内置样式。

@import '@vant/weapp/common/index.wxss';

文字省略

当文本内容长度超过容器最大宽度时,自动省略多余的文本。

<view class="van-ellipsis">
  这是一段宽度限制 250px 的文字,后面的内容会省略。
</view>

<!-- 最多显示两行 -->
<view class="van-multi-ellipsis--l2">
  这是一段最多显示两行的文字,后面的内容会省略。
</view>

<!-- 最多显示三行 -->
<view class="van-multi-ellipsis--l3">
  这是一段最多显示三行的文字,后面的内容会省略。
</view>

image.png

使用:多行文本两行显示溢出省略号:

image.png image.png

image.png