小程序开发单行多行文本隐藏-省略号效果

最新推荐文章于 2022-10-09 14:15:33 发布

我慢慢地也过来了

最新推荐文章于 2022-10-09 14:15:33 发布

阅读量217

点赞数 1

分类专栏：小程序文章标签：其他经验分享小程序

本文链接：https://blog.csdn.net/m0_46529566/article/details/121453663

版权

小程序专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSS样式实现小程序中单行或多行文本溢出时的省略号效果。对于单行文本，通过禁止换行并限制宽度来达到目的；对于多行文本，则采用-webkit-box模型和-webkit-line-clamp属性来限定行数。

摘要由CSDN通过智能技术生成

小程序开发单行多行文本隐藏-省略号效果

单行：

    /* 单行文本溢出隐藏 */
    /* 先转换为块级元素 */
    display: block;
    /* 不让换行 */
    white-space: nowrap;
    /* 隐藏 */
    overflow: hidden;
    text-overflow: ellipsis;

效果显示：

在这里插入图片描述

多行：

/* 多行文本溢出隐藏 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
/* 设置其对其模式 */
-webkit-line-clamp: 2;

效果显示：

在这里插入图片描述

O(∩_∩)O哈哈~
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

我慢慢地也过来了

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

王佳斌

08-10

2884

微信小程序，vue2，vue3，文字展开收起，文本text如何超出指定行数后折叠起来，当点击展开时把全部文本显示出来，微信小程序文字展开收起功能，不定高展开收缩组件，高度不确定，文字大小，当一行文字过多时显示省略号，显示展开，展开和收起，长多行文本内容展开与收起单行文本溢出隐藏，显示省略号的同时，实现展开收起功能，全文收起，长文本收缩展开，展开/收起省略号点击后展示内容，展示固定行数，查看更多，超出固定行数，折叠展开效果，收起按钮，大段文本内容过多，实现折叠与展开效果，两行溢出隐藏并显示展开按钮，带动画，超

微信小程序 文字超出view宽度后、超过行数后隐藏显示省略号

Dove言和

09-04

8683

这是设置了需要显示3行，超出后隐藏并用省略号代替显示 1、单行显示： overflow:hidden; //隐藏溢出 text-overflow:ellipsis;//当文本溢出包含元素时显示省略符号来代表被修剪的文本 white-space:nowrap; //规定段落中的文本不进行换行 2、规定行数显示 display: -webkit-box; word-break: b...

参与评论您还未登录，请先登录后发表或查看评论

小程序文本溢出隐藏

qq_34907249的博客

10-09

390

父元素使用flex布局，子元素就不需要设置display:inlin-block。

小程序和HTML的单行，多行文本溢出隐藏

douyiqing的博客

03-04

893

在前端开发以及小程序开发中，单行，多行文本溢出隐藏经常用到。接下来我就把我知道的几种情况整理出来以供大家参考。 微信小程序 多行text文本溢出隐藏 display: -webkit-box; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp:3; // 你想要的行数 overflow: hidden; ...

小程序多行文本省略号、单行省略号

weixin_43886375的博客

07-28

265

// 多行省略 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; //单行 text-overflow: ellipsis; white-space: nowrap; overflow: hidden;

小程序文字实现单行和多行文字显示省略号

qq_44681288的博客

07-29

756

最近写小程序遇到一个问题：scroll-view标签中的text标签文字不会换行？ 1.text是属于行元素，需要转换成块元素才能设置对应的宽高（display：inline） 2.出现文字不会换行原因： 1.横向滚动代码 2.由于在父元素中设置了white-space：nowrap（不换行），所以下文的文字也会出现不换行的情况，也应该给text标签设置white-space:no...

微信小程序开发——单行文本溢出显示省略号

weixin_46611729的博客

04-15

854

.text-deal{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-break: break-all; /* 追加这一行代码 */ } /*-webkit-line-clamp为3，代表三行后超出隐藏加省略，常用为1。*/ ...

微信小程序实现多行文字超出部分省略号显示功能

10-16

在微信小程序的开发过程中，有时候我们需要对长文本进行合理的展示，特别是在列表中，为了保持界面的整洁和美观，我们可能需要限制文字的显示行数，超出部分则用省略号表示。本文将详细介绍如何在微信小程序中实现这...

微信小程序中的canvas 文字断行和省略号显示功能的处理方法

10-17

在微信小程序中，Canvas 组件虽然提供了丰富的绘图能力，但在处理文字方面，尤其是涉及到多行显示和省略号处理时，它并没有内置的便捷方法。开发者需要自定义算法来实现这些功能。以下是对微信小程序中Canvas文字断...

微信小程序单行文本自动换行溢出部分省略号显示无效

04-17

1423

微信小程序单行文本溢出部分省略号显示无效,解决办法，亲测有效！ .text-cut { width: 300rpx; display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 另外这个标签，最好使用 ,不要使用。 <view class="text_index text...

多行实现文本溢出效果（实用）

St_Sp_En的博客

11-02

1563

要实现单行文本溢出效果：前提要给元素固定宽度，并且设置overflow:hidden; 然后联用下面属性： white-space:nowrap; 是指不换行，就是说只能一行显示。 text-overflow:ellipsis; 在一行的最后用“ … ”来表示。而有时我们需要在多行的时候，在最后一行的最后用“…”来表示，实现溢出效果：1、在webkit为内核的浏览器中可以使用一个不规范的属性-we

微信小程序 - 文字超限断尾显示省略号

开发技术资料收藏专栏

01-14

7825

.s-item text { display: -webkit-box; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; font-size: 32rpx; overflow: hidden; -webkit-box-orient: vertical;

微信小程序：设置多余文本隐藏

qq_44948979的博客

11-16

2959

微信小程序：设置多余文本隐藏一、单行隐藏 .scrollItem text{ font-size: 26rpx; /* 单行文本溢出隐藏 省略号代替 */ display: block;/*block 此元素将显示为块级元素，此元素前后会带有换行符。text 为内联元素，而overflow：hidden；作用于块元素上*/ white-space: nowrap;/*取消换行*/ overflow: hidden;/*超出的部分隐藏*/ text-overflow: ellip

css文字在图片下方_手把手教你利用CSS控制文本溢出截断省略解决方案合集

weixin_39950081的博客

11-29

459

转载链接：https://segmentfault.com/a/1190000020920000前言在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？凡事就怕较真，较真必有成长。本文试图通过编...

微信小程序空格换行以及如何隐藏标签

李俊标的博客

04-09

7481

微信小程序的空格和换行与HTML是完全不同的.在HTML中通过字符实体来实现空格的.空格: &nbsp; 注:分号不能忘记换行: <br>标签微信小程序中类似于word文档中的用法空格: \t 换行: \n 微信小程序如何隐藏标签.class_name{ display: none;}通过CSS进行控制,和HTML中的用法很类似....

小程序进阶-长（多行）文本内容展开与收起、单行文本溢出隐藏

weixin_43166227的博客

07-01

3966

多行文本和单行文本内容溢出隐藏，多行文本展开与收起。

微信小程序--单行文本、多行文本溢出变省略号...

qq_62328748的博客

08-25

675

关于单行文本溢出问题和多行文本溢出问题的解决方法，一看就懂。

微信小程序view 单行超出隐藏，多行超出隐藏

坚持，努力，奋斗不止

08-25

7088

//单行超出隐藏 overflow:hidden; //超出一行文字自动隐藏 text-overflow:ellipsis;//文字隐藏后添加省略号 white-space:nowrap; //强制不换行 //多行超出隐藏 display: -webkit-box; word-break: break-all; text-overflow: ellipsis; font-si...

微信小程序text文本溢出单行/多行省略