微信小程序 文字超过行后隐藏显示省略号

原创 已于 2022-03-24 11:22:18 修改 · 9.8k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

于 2018-05-31 11:28:16 首次发布
本文介绍如何使用CSS实现文本溢出时自动隐藏并添加省略号的效果，包括单行和多行文本的处理方式。单行文本通过设置overflow、text-overflow及white-space属性实现；多行文本则通过添加display、-webkit-line-clamp等属性来完成。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

两种情况：

1、只需要显示一行，超过的省略号处理

text{
    overflow:hidden;    //超出一行文字自动隐藏
    text-overflow:ellipsis;    //文字隐藏后添加省略号
    white-space:nowrap;    //强制不换行
}

2、如果在多行的情况下

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;

微信小程序文字超过行后隐藏并且显示省略号
qq_39702981的博客
11-22 3980
微信小程序文字超过行后隐藏并且显示省略号   在小程序开发过程中，经常会遇到一些数据无法在text中完全展示，所以会使用到隐藏相关文字，并在后方加上省略号(...)。那么怎么展示呢？ 方法一： 只需要在对应的text中设置下面的css就可以了。 overflow:hidden;//超出一行文字自动隐藏  text-overflow:ellipsis;//文字隐藏后添加省略号 whit...
微信小程序——CSS限制文字宽度和行数（溢出显示省略号）
XSL_HR的博客
06-01 3441
手把手教你学会用CSS限制文字宽度和行数
Python引号的类别及其不同用途
最新发布
imewe的博客
06-06 1004
摘要：本文介绍了Python中三种引号的使用方法：单引号(')和双引号(")用于创建单行字符串，可根据字符串内容选择合适引号以避免转义；三引号('''或""")则用于创建多行字符串和文档字符串。文章通过示例展示了各种引号的使用场景，包括处理包含引号的字符串、编写多行文本和定义函数文档说明。最后提供了作者相关Python学习专栏的信息。
微信小程序文本溢出省略号问题
weixin_45359987的博客
07-12 905
【代码】微信小程序文本溢出省略号问题。
微信小程序文字超出显示省略号
冷月醉雪的博客
01-17 734
查看更多详情：微信小程序文字超出显示省略号 · 语雀
微信小程序文字超行后，对其进行隐藏并使用省略号进行显示
qq_51218599的博客
09-12 697
【代码】微信小程序文字超行后，对其进行隐藏并使用省略号进行显示。
微信小程序实现多行文字超出部分省略号显示功能
10-16
在微信小程序的开发过程中，有时候我们需要对长文本进行合理的展示，特别是在列表中，为了保持界面的整洁和美观，我们可能需要限制文字的显示行数，超出部分则用省略号表示。本文将详细介绍如何在微信小程序中实现这...
微信小程序之canvas 文字断行和省略号显示
03-29
文字的多行处理在dom元素中很好办。但是canvas中没有提供方法，只有通过截取指定字符串来达到目的。 那么下面就介绍我自己处理的办法： wxml： ...canvas肯定要一个画板容器啦...//处理文字多出省略号显示 dealWords: fu
微信小程序实现指定显示行数多余文字去掉用省略号代替
10-18
在微信小程序开发中，实现指定显示行数并用省略号代替超出的多余文字是一种常见的文本显示需求。当文本内容超出特定范围时，通常希望以一种优雅的方式显示给用户，比如显示固定行数的文字，并用省略号（...）代替...
微信小程序 rich-text 超过 2 行显示省略号
weixin_51204324的博客
07-07 1876
因为富文本使用的 rich-text 回显，想着直接对这个标签写上这个 CSS，发现也无法达到想要的效果。Android 真机可以正常显示，在模拟器上也能正常变成省略号，但 iOS 真机不兼容。
小程序超出文本显示省略号
w1258048309的博客
09-28 1431
小程序超出文本显示省略号 小程序中超出文本显示省略号页需要使用css设置。 首先需要使用display: -webkit-box设置盒子为弹性盒子； 使用-webkit-line-clamp: 1;设置最多可以显示多少行，我这里设置最多显示为1行 使用overflow: hidden;设置超出隐藏 使用text-overflow: ellipsis；超出的内容显示为省略号 使用-webkit-box-orient: vertical；设置伸缩盒子的子元素排列方式–从上到下垂直排列 display: -w
微信小程序-文本超出字符数量出现省略号
人间清醒
07-28 5044
-当行文本(建议设置一个宽度，默认为100%) .name{ width: 319rpx; display:-webkit-box; -webkit-line-clamp:1; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; word-break:break-all; ...
小程序网页view多行文本超出隐藏或显示省略号
浩冉学编程的博客
03-09 1127
小程序网页view多行文本超出隐藏或显示省略号 实现效果：限制两行，超出即显示省略号实现：话不多说，展示代码 关键代码 .box{ width:100rpx; overflow:hidden; text-overflow: ellipsis;//超出省略号 display:-webkit-box; -webkit-line-clamp: 2;//显示行数 -webkit-box-orient: vertical; }
微信小程序多行文本超出显示省略号
m0_67448414的博客
08-02 1417
单行多行文本省略解决办法
小程序文本溢出显示省略号（单行/多行）
a1005398026的博客
04-23 678
1.单行：外部容器应加overflow: hidden;否则不显示省略号 .text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 2.多行 .text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; wo...
小程序文本溢出显示省略号
Shmily的博客
05-02 496
小程序文本溢出显示省略号 .text{ width: 100%;height: 40%; line-height: 32px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; word-break: break-all; -webkit-box-orient: vertical; -w...
文本溢出显示省略号
温暖前端的博客
07-21 592
要在微信小程序中实现文本只在一行展示，超出内容用省略号，可以使用CSS的text-overflow属性。
微信小程序之文本只显示两行多出来的用省略号表示
wy313622821的博客
08-10 5474
文本只显示两行多出来的用省略号表示 效果图为： 代码： .wxml <text class="text_small_1">此处三百字</text> .wxss .text_small_1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } ...
微信小程序 实现两行文字溢出隐藏不显示省略号
11-15
微信小程序实现两行文字溢出隐藏不显示省略号，通常可以利用CSS样式中的`text-overflow`属性配合`display`和`line-height`来控制。以下是步骤： 1. 首先，给需要限制内容的元素设置一个宽度，例如`:width: 300rpx;`。 2. 然后，设定`white-space: nowrap;`使其文本不会换行。 3. 接着，使用`overflow: hidden;`来隐藏超出的部分。 4. 要实现两行显示，你可以设置`line-height`等于字体大小的两倍加上空白间距，这样每行的高度就会固定，如果超过这个高度则会被隐藏： ```css .限定内容 { width: 300rpx; white-space: nowrap; overflow: hidden; line-height: 2em; /* 假设字体大小为16px，那么就是32px */ display: -webkit-box; /* 对于微信小程序，可能需要兼容Webkit内核 */ -webkit-line-clamp: 2; /* 显示两行 */ -webkit-box-orient: vertical; } ``` 5. 如果你想在超出时完全不显示省略号，可以使用伪元素`::after`手动添加自定义提示，如“更多”： ```css .限定内容::after { content: "更多"; color: #ccc; position: absolute; right: 0; bottom: 0; } ``` 记得替换`.限定内容`为你实际选择的元素类名，并调整相应的尺寸和颜色值。如果你想要动态适应不同屏幕大小，还可以结合媒体查询进行调整。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值