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

最新推荐文章于 2024-04-29 19:16:47 发布
最新推荐文章于 2024-04-29 19:16:47 发布
阅读量2.7k 收藏 8
点赞数 4
分类专栏： 笔记 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42284614/article/details/117377269
版权

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

当文本内容太长超出盒子固定样式，我们可以将超出盒子的文本改成省略号。

具体WXSS样式如下所示：

.xxxx {
   
    display:-webkit-box;/*设置为弹性盒子*/
    overflow:hidden;/*超出隐藏*/
    text-overflow:ellipsis;/*显示省略号*/
    -webkit-line-clamp:1;/*多少行后显示省略号，这里设置为第一行超出后显示省略号*
最低0.47元/天 解锁文章
CHANCE_D
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序单行文本自动换行溢出部分省略号显示无效
04-17 1363
微信小程序单行文本溢出部分省略号显示无效,解决办法，亲测有效！ .text-cut { width: 300rpx; display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 另外这个标签，最好使用 ,不要使用 。 <view class="text_index text...
微信小程序之文本只显示两行多出来的用省略号表示
wy313622821的博客
08-10 5101
文本只显示两行多出来的用省略号表示 效果图为： 代码： .wxml <text class="text_small_1">此处三百字</text> .wxss .text_small_1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } ...
微信小程序实现超过指定行数文本省略展示并动态显示查看全部
最新发布
weixin_42285486的博客
04-29 511
通过获取文本高度，动态绑定ellipsis类名及动态控制显隐查看全部按钮。【微信小程序相关API】
微信小程序使用多行文本溢出显示省略号样式失败问题
weixin_44801790的博客
05-19 835
微信小程序实现多行文本显示省略号样式失败问题
微信小程序css溢出显示省略号失败问题（html解析）
xxx
10-10 381
【代码】微信小程序css溢出显示省略号失败问题（html解析）
微信小程序实现多行文字超出部分省略号显示功能
10-16
通过这种方式，我们可以有效地在微信小程序中实现多行文字的省略号显示功能。需要注意的是，由于`-webkit-line-clamp`和`-webkit-box`是Webkit内核特有的CSS属性，所以这种方法只适用于基于WebKit的浏览器或平台，如...
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
10-16
主要介绍了微信小程序多行文本显示...+显示更多按钮和收起更多按钮,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
微信小程序基础text空格省略号
08-20
以上就是关于微信小程序中`text`组件处理空格、插入特殊符号及实现文本省略号的基本方法。在实际开发中，根据需求可能还需要结合动态计算、数据绑定等特性来进一步优化和调整。通过熟练掌握这些技巧，可以提高微信小...
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
10-17
以下是对微信小程序中Canvas文字断行和省略号显示功能的详细解析： 1. **文字测量**： - `measureText()` 方法是用于测量文本尺寸的关键，它返回一个对象，其中的 `width` 属性表示文本的宽度。在微信小程序中，这...
微信小程序 富文本 换行问题 文本溢出使用省略号
zhongmei121的专栏
04-04 1574
》需求场景：由于有高亮的需求，所以选择用富文本的标签<rich-text>，同时还有个需求是希望展示两行，然后溢出的情况用省略号。 》解决思路：在nodes节点里面包一层div，然后设置该div的样式为显示两行，溢出文本用省略号显示。 》代码： html： <rich-text class="rich_text product-name" :nodes="item.productName | formatRich"></rich-text> js： fil
小程序------ 内容超过指定的宽度打省略号....
qq_43983650的博客
12-23 256
这是会有两种情况 1、只能在一行内显示，超出的变为省略号 效果图： 直接上代码： .line1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 2、在两行内显示，超过的打省略号 效果图： 直接上代码： .line2 { word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orien
微信小程序文本溢出省略号（···）
S筱潇S四维Smile
07-21 680
wxss文件添加这些代码即可实现 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all; /* 追加这一行代码 */
小程序-后台获取内容纯数字、纯字母，不换行超出父盒子宽度问题解决
zhangxy的博客
11-29 596
数字内容均是从后台获取的，超出了父盒子宽度 <view>备注：{{remark}}</view> 解决如图 <view style="word-break: break-all;">备注：{{remark}}</view> <view style="word-wrap:break-word;">备注：{{remark}}</...
小程序 页面 中 截取字符串长度 超过显示 多余的 用省略号
小马哥的天涯
01-23 4974
1.首先 在对应页面下新建  “  center.wxs   ” 文件 这个文件是小程序自身 一套脚本语言   2.在 .wxs  文件中 写 截取字符串的 方法 // 小程序页面中 如何截取字符串 var substr = function(val) { if (val.length == 0 || val == undefined) { return false; } else i...
微信小程序 文本超出显示省略号...
weixin_45843723的博客
01-14 492
老记不住这个，用的时候又要找，找到的又不起效，所以记录一下 ------------不用设置宽 ------------ /* 超出两行省略号 */ display: -webkit-box; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; /* autoprefixer: ignore next */ -webkit-box-orient: vertical; --
小程序实现超出两行文字用省略号表示
wzqac2017的博客
10-01 491
超出两行文字，就用省略号表示 // wxml中 <p>【睡觉专用】适合晚上安静听的纯音乐</p> // wxss中 p { display: -webkit-box; // 移动端设备自适应布局 height: 29px; // 两行文字大概的高度 overflow: hidden; // 溢出隐藏 text-overflow: ellipsis; // 溢出省略号表示 -webkit-line-clamp: 2; // 限制两行 -webkit-box-orient:
微信小程序换行处理
shi450561200的博客
05-18 6167
【代码】微信小程序换行处理。
微信小程序文本超出自动换行解决方案
热门推荐
XH_jing的博客
10-15 1万+
使用场景：在一段文本中，显示的内容过多，超出原本设置的范围，现在需要将它进行分行显示。 实现方案： 前提：给 view或者 text 容器设置默认的 display: block 然后设置属性：text-overflow:ellipsis; word-wrap:break-word; 就可以实现自动换行。 如果是因为大段文本内容过多，需要实现折叠与展开效果，请移步 ...
微信小程序 两行才显示省略号
06-06
在微信小程序中，可以使用 `text` 组件来显示文本内容，并通过设置 `line-clamp` 样式来实现两行才显示省略号效果。 具体来说，需要设置以下三个样式： ``` display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; ``` 这三个样式将会使文本在纵向方向上显示，并且设置 `overflow: hidden;` 可以将超出部分隐藏起来。然后，通过设置 `-webkit-line-clamp` 属性来控制文本显示的行数，同时要设置一个比较大的值，例如 `9999`，表示只有当文本超过两行时才会显示省略号。最后，再设置一个 `text-overflow: ellipsis;` 来实现省略号效果。 完整的代码如下： ``` <text class="ellipsis-2">这是要显示的文本内容</text> /* 样式代码 */ .ellipsis-2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 9999; text-overflow: ellipsis; } ``` 在上面的代码中，我们设置了一个类名 `.ellipsis-2`，并在 `text` 组件中应用这个类名。同时，我们在样式代码中设置了 `display: -webkit-box;` 和 `-webkit-box-orient: vertical;`，将文本在纵向方向上显示，并使用 `overflow: hidden;` 将超出部分隐藏。然后，使用 `-webkit-line-clamp: 9999;` 来控制文本显示的行数，同时设置一个比较大的值，表示只有当文本超过两行时才会显示省略号。最后，使用 `text-overflow: ellipsis;` 来实现省略号效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值