uniapp最多3行如何实现

在uniapp中如何实现最多显示3行文本的效果？如果文本内容超过3行，需要自动截断并显示省略号。类似CSS的-webkit-line-clamp属性效果，请问在uniapp中有没有跨平台的解决方案？

2 回复

uniapp实现最多3行文本显示，可通过CSS设置：

.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

适用于H5和小程序，兼容性较好。


在 UniApp 中实现最多显示 3 行文本，超出部分显示省略号，可以通过 CSS 样式控制。以下是实现方法：

方法一：使用 CSS -webkit-line-clamp 属性

.text-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 限制为3行 */
  overflow: hidden;
  text-overflow: ellipsis;
}

方法二：使用 UniApp 的 <text> 组件（小程序端）

<text class="text-ellipsis">这里是要显示的文本内容...</text>

注意事项：

  1. 在部分安卓机型或 H5 端可能需要添加 line-height 确保正确计算行数
  2. 如果遇到兼容性问题，可以添加以下样式：
.text-ellipsis {
  /* 其他样式同上 */
  line-height: 1.2; /* 根据实际字体大小调整 */
  max-height: 3.6em; /* 3行 × 1.2行高 */
}

完整示例：

<template>
  <view>
    <text class="three-lines">这里是很长的文本内容，超过三行时会显示省略号...</text>
  </view>
</template>

<style>
.three-lines {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
</style>

这种方法在大多数情况下都能正常工作，如果需要更好的兼容性，可以考虑使用 JS 计算文本高度来实现。

回到顶部