多行文本展开收起（css）

原创

已于 2022-02-21 15:33:39 修改 · 3.2k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

于 2022-02-21 15:30:50 首次发布

本文介绍了如何使用CSS实现多行文本超出部分省略、按钮定位以实现文字环绕、状态切换、根据文本行数判断是否显示展开按钮等功能，并提供了完整的代码示例。

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

纯css来实现多行文本展开收起的效果。

1.实现文本超出部分省略

单行文本：

.text{
   width: 250px;
   overflow:hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

多行文本：

可以使用-webkit-line-clamp实现。

注意：这是一个不规范的属性,它没有出现在 CSS 规范草案中。

.text {
  display: -webkit-box;//必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
  -webkit-line-clamp: 3;//用来限制在一个块元素显示的文本的行数
  -webkit-box-orient: vertical;//必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
  overflow: hidden;//超出部分隐藏
}

2.按钮定位（实现文字环绕效果）

添加一个button,利用浮动,先将按钮浮动定位到右下角，对content使用flex布局，添加一个伪元素实现文字环绕效果。

.btn{
  float: right;
  clear: both;
}

// 伪元素
.text::before{
  content: '';
  float: right;
  width: 0px;
  height: calc(100% - 16px);//动态高度
}

3.展开——收起状态切换

将button换成label,通过for与checkbox关联

 <input type="checkbox"

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

梨遇

关注关注

4
点赞
踩
20

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

使用纯CSS实现多行文本展开收起效果

王铁柱666的博客

03-06

423

还有一点需要注意的是，由于CSS的局限性，这种方法并不能实现像JavaScript那样的动态交互效果。例如，如果你需要在文本展开或收起时执行一些额外的操作（如发送统计数据），那么你可能需要使用JavaScript来实现。要使用纯CSS实现多行文本展开收起的效果，可以使用一种叫做“checkbox hack”的技巧。注意，这个示例只是一个基本的实现，你可能需要根据你的具体需求进行调整。同时，我们也更改了按钮的文本，以便用户知道当前的文本状态。元素的高度来适应不同长度的文本，或者添加更多的样式来改善用户体验。

多行文本展示折叠与展开

04-21

文本内容较多时，展示需要特殊处理。可折叠，可展开。细节处理优化~

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

css实现多行文本的展开收起

我码玄黄的博客

06-12

2219

本文通过纯CSS实现多行文本展开收起效果，包括右下角环绕按钮、状态切换及文本行数判断。利用flex布局、input与label关联、伪元素生成等技术，解决展开收起按钮的显示与隐藏问题，实现动态高度和状态切换。

文本展开收起css/js两种，js紧跟文案后面显示

最新发布

fengxiaopeng74的博客

06-16

253

展开收起功能

CSS 实现多行文本“展开收起”

weixin_56105228的博客

03-13

1946

前段时间，我分享了一种文本展开收起的方法，并得到了广大朋友的积极反馈。其中，有热心的朋友特别提出一个建议，希望将展开收起的按钮放置在文本末尾。为此，我进行了多次调试与尝试，终于实现了这一功能，并在此与大家分享我的成果。

拜托，css这样实现多行文本“展开收起” 超酷的好吧

2401_84094029的博客

04-17

1260

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里获取！讲义、实战项目、讲解视频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里获取！[外链图片转存中…(img-shpIlEaF-1713319901454)][外链图片转存中…(img-XzngjNZ3-1713319901455)]

css实现多行文本展开收起

weixin_38687522的博客

06-01

842

多行文本展开收起是一个很小常见的交互：这一类布局和交互难点主要有以下几点：位于多行文本右下角的展开收起按钮展开和收起的两种状态的切换当文本不超过指定行数时，不显示展开收起按钮说实话，之前单独看这个布局时，即使借助javascript也不是一件容易的事情，需要计算文字宽度动态截取文本，vue-clamp这是这么做的，更别说下面的交互和判断逻辑了，不过经过我一番琢磨，其实纯css也能完美实现的，下面来看看如何实现的吧。一、位于右下角的展开收起按钮（仅兼容chrome, 无点击效果） <

纯css实现多行文本展开收起

by2016的博客

07-13

670

纯CSS实现多很文本展开收起常见方案基础的css实现多行文本省略显示在工作中非常常见 p{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } 但是很多时候会要求实现展开收起模块就像这样：如图那种只要控制overflow状态就可实现标准的固定高度的展开收起很好做，但是很多时候是按照文本行数来判断，同时要适应不同宽度的弹性布局，这时候常见的方

【CSS】1920- 使用 CSS @container实现多行文本展开收起

pingan8787

01-09

309

之前写过这样一篇文章：CSS 实现多行文本“展开收起”，介绍了一些纯 CSS 实现多行文本展开收起的小技巧，非常巧妙，有兴趣的可以回顾一下。不过展开收起按钮的隐藏和显示采用了“障眼法”，也就是通过一个伪元素设置和背景相同的颜色覆盖实现的，如下时代在进步，CSS也在不断发展。CSS 容器查询[1]出来也有一段时间了，能够动态判断容器尺寸，赶紧拿来用一下，发现并没有想象中的那么顺利，甚至还有些难用，...

多行文本展开收起

大山博客

12-28

411

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

拜托，css这样实现多行文本“展开收起” 超酷的好吧，web前端开发笔试题

2401_84092809的博客

04-06

1470

前段时间接到一个需求，关于文字展开和收起的，走了很多路,踩了很多坑。在这个夜深人静，想你想到泪流的时候，决定记录分享一下。未展开展开未展开展开就如上面所述，我倒是第一次做这种需求，于是就网上搜索下案例，然后就搜出下面这篇文章：文章链接：https://juejin.cn/post/6963904955262435336#comment但是后面发现有些问题，其实他的文章后面的评论区也有读者提出来了问题。其实我觉得问题也不大，于是问哦下设计大佬显然，就收到了拒绝。

多行文本的展开和收起(纯css)

欣欣酱博客

07-22

2997

点击按钮时展开，文本铺满后收起，全程无js代码，不获取dom元素实现这个过程。毫无疑问需要有一个总体的容器包裹以下元素：text内容，按钮由于纯css实现，则需要利用input的checkbox + label for来实现点击按钮的操作。...

uniapp多行文本展开收起

04-02

### UniApp 中多行文本的展开与收起功能实现在 UniApp 中，可以通过动态控制 `text` 的显示高度来实现多行文本的展开与收起功能。具体来说，可以利用 CSS 样式中的 `line-clamp` 或者通过 JavaScript 动态设置样式属性的方式完成。以下是基于 Vue.js 和 UniApp 的一种常见实现方式： #### HTML 结构 ```html <view class="content"> <view class="text" :class="{ 'show-more': isShowMore }">{{ textContent }}</view> <button @click="toggleText"> {{ isShowMore ? '收起' : '展开' }} </button> </view> ``` #### 数据绑定与逻辑处理 ```javascript export default { data() { return { textContent: "这是一段非常长的文字内容，用于演示如何在 UniApp 中实现多行文本的展开与收起功能。这段文字可能来自服务器或者本地定义。", isShowMore: false, // 控制是否展示全部内容 }; }, methods: { toggleText() { this.isShowMore = !this.isShowMore; // 切换状态 } } }; ``` #### 样式部分 ```css .text { display: -webkit-box; -webkit-line-clamp: 3; /* 设置最多显示几行 */ -webkit-box-orient: vertical; overflow: hidden; } .show-more { -webkit-line-clamp: unset; /* 取消行数限制 */ } ``` 上述代码实现了以下功能： 1. 默认情况下只显示三行文本[^1]。 2. 用户点击按钮后切换 `isShowMore` 状态，从而改变样式的 `-webkit-line-clamp` 属性，达到展开或收起的效果[^2]。此方案适用于大多数场景下的多行文本折叠需求。如果需要更复杂的交互效果（如动画过渡），还可以引入额外的库或自定义 CSS 动画。 ---