uniapp text只显示两行如何实现

在uniapp中如何让text组件只显示两行内容，多余部分用省略号代替？需要设置哪些CSS属性或使用什么组件来实现这个效果？

2 回复

使用CSS设置text-overflow: ellipsis和-webkit-line-clamp: 2，示例如下：

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

在uni-app中实现文本只显示两行并超出部分显示省略号，可以通过以下CSS样式实现：

.text-two-lines {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

使用方法：

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

<style scoped>
.text-two-lines {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 可选：设置行高和字体大小 */
  line-height: 1.5;
  font-size: 14px;
}
</style>

注意事项：

  1. 这种方法使用了WebKit内核的私有属性，在大多数移动端浏览器中兼容性良好
  2. 如果需要更好的兼容性，可以考虑使用JavaScript计算文本高度来实现
  3. 确保父容器有足够的宽度来容纳文本

替代方案（JS实现）： 如果CSS方案在某些设备上不兼容，可以使用uni-app的计算方法动态截断文本，但CSS方案更简单高效。

回到顶部