多行文本收起/展开功能

已于 2022-01-22 16:01:28 修改
阅读量1.4k 收藏 8
点赞数 2
分类专栏： 前端常用方法 文章标签： 多行文字展开/收起功能
于 2022-01-22 14:08:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GTbond/article/details/122636806
版权
本文介绍了如何实现多行文本的收起/展开功能。当文本超过指定行数（默认为2行）时，显示收起按钮。该功能具有文字环绕按钮的优点，避免了遮挡文字的问题，并且可以调整行数限制。然而，存在兼容性问题，不适用于IE、Firefox和Safari浏览器。文中提供了相关参考文档和最终版代码。
摘要由CSDN通过智能技术生成

多行文本收起/展开功能

参考文档
https://juejin.cn/post/6963904955262435336
http://www.webkaka.com/tutorial/html/2021/0624113/

1. 效果图（默认设置超过2行才显示 按钮）
  • 文字未超过两行
    在这里插入图片描述
  • 超过两行
    在这里插入图片描述
    在这里插入图片描述
2. 优点缺点

1.按钮和文字是环绕型，不会遮挡文字，文字避开会换行，不会像用定位做的，不会遮挡刚刚顶满最后一行的文字，定位的按钮和部分文字出现遮挡
2. 默认超过两行出现 收起、展开功能；可以修改-webkit-line-clamp: 2;改变行数
3.兼容性问题：IE浏览器、火狐、Safari不能生效

3. 代码
<template>
    <!-- 按钮和文字是环绕型，
最低0.47元/天 解锁文章
GG·bond
关注
专栏目录
文字保留4行 展开收起放在文字最右边
weixin_43963309的博客
10-26 228
<template> <div> <div :class="showTotal ? 'total-introduce' : 'detailed-introduce'"> <div class="intro-content" :data-title="introduce" ref="desc"> <span class="merchant-desc" v-if="introduce">{{introduce.
html 展开与收起怎么写,自己写了一个展开和收起的多更能型的js效果
weixin_42526166的博客
05-30 1496
先来看看效果：具体的功能是：1.页面上面最多只有一个是显示全部内容的。2.当自己处于全部显示的时候，点击自己的收起，自己收起。3.当自己处于全部显示的时候，点击其他的展开是，自己内容隐藏，原来的"收起"变为"展开"而被点击的选项则内容全部显示，"展开"变为"收起"=================================================部分代码：==============...
CSS 单行、多行文本溢出处理，纯css实现文本展开 / 收起
最新发布
taiwuyang的博客
08-22 2479
在网页布局和样式设计中，处理文本溢出是一个常见的需求。为了在单行或多行文本过长时处理溢出情况，CSS 提供了几个有用的属性。本文将介绍如何使用这些 CSS 属性来处理文本溢出问题，包括单行和多行的情况。用于记录展开或收起的状态，它是这个功能的核心。限制块级元素显示的行数，这里限制为 3 行。设置或检索伸缩盒对象的子元素的排列方式。这是一个很长的文本，用于演示单行文…强制文本在一行内显示，禁止换行。的状态来实现类似的功能。超出容器的部分将被隐藏。这是一个很长的文本，用于。演示多行文本溢出时的省略。
文字的展开和收起
baidu_41604826的博客
05-15 1672
列表式的文字的展开和收起的实现 需求： 1:当文字超出目标值，则截取目标值，其他隐藏,同时显示“展开”二字和下拉箭头； 2:点击“展开”显示所有文字，同时改为“收起”和上拉箭头 3：如果文字本身就没有超过目标值，则显示所有文字即可 之前想过使用css设置超出多少行隐藏，或者给Li标签设置高度隐藏，但都无法满足以上第三条，所以想到了下边一种方法将就可以使用 思路： 1：初始遍历需要展开和收起的元素，...
高级前端面试题2024，Vue 中文本内容超出规定行数（字数，2024前端开发社招面试解答之性能优化
m0_60388216的博客
04-06 156
Ccs不能精确到字符，直接三目运算，三目运算就是三元表达式。直接在显示的地方用substring(0,50)截断就好。3 实现显示50个字符 超出部分用…这个是不通的我也不知道为什么…
vue 实现多个展开收起功能
huxue12的博客
07-26 2712
文章目录前言一、思路二、尝试1.HTML上生成特定的class2.控制展开/收起总结 前言 需求场景：移动端/h5/公众号页面，有很多分类，每个分类下展示图片，默认超出两张 出现展开和收起功能。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/c4d23bd6a254450c81487c84884bb708.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6
HTML 展开收起
weixin_44538225的博客
01-17 1万+
（1） 授课老师教的展开收起的实现  Html部分 （1）&amp;lt;div class=&quot;cont&quot;&amp;gt; &amp;lt;div class=&quot;tab_box2&quot; id=&quot;tab_box2&quot;&amp;gt; &amp;lt;table class=&quot;caozuo&quot; cellspacing=
多行文本展开收起（css）
weixin_43765747的博客
02-21 3129
在实现之前，先了解文本超出部分省略的实现方法。 单行文本： .text{ width: 250px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; } 多行文本： .text { display: -webkit-box;//必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-line-clamp: 3;//用来限制在一个块元素显示的文本的行数 -webkit-
多行文本展示折叠与展开
04-21
"多行文本展示折叠与展开"是一个关键的交互设计概念，它涉及到用户体验（UX）和用户界面（UI）的优化。这个主题的核心是提供一个既清晰又高效的文本显示方式，尤其是在内容丰富的情况下。 首先，我们要理解什么是...
多行文本 展开收起
大山博客
12-28 381
https://zhuanlan.zhihu.com/p/373359523 <div class="content_box"> <input type="checkbox" id="exp"> <div class="content word" line-clamp="2"> <label class="btn" for="exp"></label> {{orderInfo.originalCont
多行文本自动收起并可展开功能
故里的博客
02-22 1170
多行文本自动收起并可展开功能
Vue - 多行文本“展开、收起”功能
Moon Star
01-02 1493
使用 js 实现文本展开、收起。
html文本超出隐藏，展开和收起。
Hhjian524的博客
07-17 7194
主要是实现当文本的长度超出一定的长度时，文本剩余的部分省略，出现展开，点击展开，文本全部显示，点击收起，文本回复省略显示。 之前文本的超出多少行省略显示主要是用到以下的css样式来控制 text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;/*行数*/ line-clamp:
展开收起消息内容，控制字数的显示收起
06-10
自己用到了，没有找到合适的，在这里分享给需要的朋友
html+css+js 简易展开收起效果
热门推荐
zhengxue_er
09-29 1万+
用html+css+js做一个简易的文本展开收起效果。如图： （部分结构标签可能不是最佳选择，此次仅以实现展开收起效果为例子） 以HBuilder编辑器选项卡中“查找”选项为例。设定“查找”为链接，点击链接实现标签的展开收起效果。1.html部分①.首先确定该选项的构成：一个显示标签和一组隐藏选项。html的整体结构框架为：<div id="showdiv"> <a i
js实现段落展开和收起
七七的博客
01-11 728
js实现文字内容展开收起
前端实现文本展开收起
beautyyaoyao的博客
04-07 916
需求描述：文本内容若一行能够展示完，则不需要更多/收起按钮；若不能则需单行文本省略展示并显示更多/收起按钮可供操作。文本的展开收起是我们网页常常需要优化处理的操作。
vue实现多行文本展开收起组件
qq_40195282的博客
12-12 5713
一、内容简介 多行文本展开收起功能现在已经算是一个非常常见的效果了，之前写过一篇文章也是用vue实现了文本展开收起功能。一年过去了，是时候展示真正的技术了^ _ ^。这次实现一个效果更好的组件： 效果预览： 二、实现思路 getClientRects: 先来看下这个api可以得到什么 <template> <div id="app"> <div class="over-ellipsis"> <span ref="overEllipsis
css实现多行文本的展开收起
weixin_42565367的博客
02-21 757
css实现多行文本的展开收起 从知乎上一个大佬那里学来的，不使用js实现多行文本的展开和收起，全浏览器兼容，所以学习记录一下。原文参照这篇文章. 实现效果： <style> .wrap { display: flex; width: 600px; overflow: hidden; box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff; position:
css实现文字展开收起
weixin_44037153的博客
08-01 2402
vue css实现文字展开收起
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值