微信小程序之单行溢出隐藏和双行溢出隐藏

关注

原创 2025-06-26 10:05:50 481 阅读 AI 写同款· GEO 优化 ›

微信小程序 - 详细实现view/text文字过长导致溢出问题，解决当文本太多时自动隐藏并显示三个点超出显示省略号，小程序文本溢出不生效解决办法，可指定显示行数多余文字去掉用省略号代替（定义多少行隐藏 微信小程序，vue2，vue3，多行文本溢出，文字多出部分显示三个点，超出后隐藏并用省略号代替，微信小程序 文字超出view宽度后、超过行数后隐藏显示省略号，微信小程序实现多行文字超出部分省略号显示功能，显示固定字数省略号表示多余部分，TextView最大长度限制,超出部分省略号显示，小程序网页view多行文本超出隐藏或显示省略号，微信小程序超出省略号，最新，不生效怎么办，超过 2 行显示省略号，微信小程序实现指定显示行数多余文字去掉用省略号代替，小程序超出三行省略并在后面显示展开收起，微信小程序文字超出阅读详情

首先，我们做个text，加入了一个长文本，就像下面那样：

wxml :

<view class="container">
  <text>刘德华（Andy Lau），1961年9月27日出生于中国香港，华语影视男演员、流行乐歌手、电影制片人、作词人。</text>
</view>

wxss :

.container {
  margin-top: 500rpx;
  font-size: 38rpx;
  padding: 0 50rpx;
}

这个时候，我们需求是，文本只显示一行，多余的隐藏并显示成三个点。

此时，就要用到溢出隐藏三件套了：

.container text {
  /* 将text控件当做block处理，不然就不起作用了 */
  display: block;
  /* 不换行的标识 */
  white-space: nowrap;
  /* 超出部分隐藏 */
  overflow: hidden;
  /* 隐藏部分用省略号代替 */
  text-overflow: ellipsis;
}

假如，我们要显示两行呢？

如下修改：

/* 两行显示，多余隐藏，隐藏部分省略号显示 */
  /* 将text当做弹性盒子处理 */
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 竖向对齐 */
  -webkit-box-orient: vertical;
  /* 显示行数，2就是显示2行 */
  -webkit-line-clamp: 2;

效果：