微信小程序文字超出显示省略号

本文介绍了微信小程序中处理文字超出显示省略号的方法。通过设置容器固定宽度或使用CSS属性`-webkit-line-clamp`限制显示行数,实现内容超出部分以省略号隐藏。注意,textarea标签不支持此样式。

如果容器有固定的宽度,加入以下代码即可。

view {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

如若容器不需要有固定的宽高,只需加入以下代码即可。
无需指定高度,只需指定最多显示几行,属性 -webkit-line-clamp。
本示例中最多显示3行,超出3行后,在第三行末尾用省略号代替显示。

view {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

Ps:textarea标签不支持

微信小程序中实现单行文本溢出显示省略号的效果,可以通过以下 CSS 样式来完成。这种效果通常用于防止文字溢出容器,并在文字过长时显示省略号。 ### 单行文本溢出显示省略号的实现方法 #### WXML 结构 ```html <view class="text-ellipsis">这是一段可能会超出容器的文字内容</view> ``` #### WXSS 样式 ```css .text-ellipsis { display: block; /* 或 inline-block,根据需求 */ max-width: 500rpx; /* 设置容器的最大宽度 */ overflow: hidden; /* 超出部分隐藏 */ white-space: nowrap; /* 强制文本在一行内显示 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ } ``` ### 说明 - `display: block` 或 `inline-block`:确保容器可以限制宽度。 - `max-width`:定义容器的最大宽度,超出该宽度的文字将被隐藏或截断。 - `overflow: hidden`:隐藏超出容器范围的文字。 - `white-space: nowrap`:防止文字换行,强制在一行内显示。 - `text-overflow: ellipsis`:当文字溢出时,显示省略号(...)表示内容被截断。 ### 示例效果 如果容器的宽度不足以容纳全部文字,例如设置为 `500rpx`,而文字内容过长,最终效果会是文字在容器内显示为一行,并在末尾显示省略号。 #### 示例代码 ```html <view class="text-ellipsis">这是一段非常长的文字内容,可能会超出容器的宽度</view> ``` ```css .text-ellipsis { display: block; max-width: 500rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } ``` ### 注意事项 - 确保容器的宽度是固定的,或者使用 `max-width` 来限制最大宽度,否则 `text-overflow: ellipsis` 可能不会生效。 - 如果容器的宽度是动态变化的,需要结合 JavaScript 或小程序逻辑动态调整样式。 ---
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

刺心疯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值