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

简介: CSS实现多行文本的展开收起

背景

在我们写需求时可能会遇到类似于这样的多行文本展开与收起的场景:

image.png

image.png

那么,如何通过纯css实现这样的效果呢?

实现的难点

(1)位于多行文本右下角的 展开收起按钮

(2)展开和收起两种状态的切换。

(3)文本不超过指定行数时不展示 展开收起按钮

一、位于右下角的“展开收起”按钮

多行文本截断

假设有这样一个结构:

<div className="text">
  银泰百货,银泰百货,银泰百货,银泰百货,银泰百货,银泰百货,银泰百货,银泰百货,银泰百货,银泰百货,银泰百货,银泰百货,银泰百货,银泰百货,银泰百货,银泰百货,银泰百货,
</div>

多行文本超出省略,主要用到用到 line-clamp,关键样式如下:


.text {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

右下角环绕效果

下面放一个按钮,然后设置浮动,可以使文本环绕按钮,在通过一个 margin-top 可以使按钮移动到右下角

<div className="text">
  <button className="btn">展开</button>
  银泰百货,银泰百货,银泰百货,银泰百货,银泰百货,银泰百货,银泰百货,银,银泰百货,银,银泰百货,银,银泰百货,银,银泰百货,银,银泰百货,银,银泰百货,银
</div>
<style>
.btn  float:right  margin-top:50px}
</style>

image.png

可以看到,虽然按钮到了右下角,但是文本却没有环绕按钮上方的空间,空出了一大截

此时我们可以通过多个浮动元素进行调整,这里用伪元素 ::before 来代替

<style>
.textbefore{
  content:'';
  float:right;
  width:10px;
  height:58px;/*先随便设置一个高度*/
  background:red
}
</style>

通过清除浮动使伪元素位于按钮的上方

<style>
.btn{
  float:right;
  clear:both;
}
</style>

image.png

可以看到,现在文本是完全环绕在右侧的两个浮动元素了,只要把红色背景的伪元素宽度设置为0(或者不设置宽度,默认就是 0),就实现了右下角环绕的效果

<style>
.textbefore{
  content:'';
  float:right;
  width:0;/*设置为0,或者不设置宽度*/
  height: 50px;/*先随便设置一个高度*/
}
</style>

image.png

动态高度

上面虽然完成了右下加环绕,但是高度是固定的,如何动态设置呢?

这里可以用到 calc 计算,用整个容器高度减去按钮的高度即可,如下:

<style>
.textbefore{
  content:'';
  float:right;
  width:0;/*设置为0,或者不设置宽度*/
  height: calc(100% - 24px);/*先随便设置一个高度*/
}
</style>

很可惜,好像并没有什么效果,打开控制台看看,结果发现 calc(100% - 24px) 计算高度为 0

image.png

原因就是高度 100% 失效的问题,关于这类问题网上的分析有很多

通常的解决方式是给父级指定一个高度,但是这里的高度是动态变化的,而且还有展开状态,高度更是不可预知,所以设置高度不可取。

除此之外,其实还有另一种方式,那就是利用 flex 布局

因此,这里需要给 .text 包裹一层,然后设置 display: flex

<div className="wrap">
  <div className="text">
    <button className="btn">展开</button>
    银泰百货,银泰百货,银泰百货,银泰百货,银泰百货,银泰百货,银泰百货,银,银泰百货,银,银泰百货,银,银泰百货,银,银泰百货,银,银泰百货,银,银泰百货,银
  </div>
</div>
<style>
.wrap{
  display :flex;
}
</style>

image.png

这样下来,刚才的计算高度就生效了,改变文本的行数,同样位于右下角

二、“展开”和“收起”两种状态

CSS 状态切换,需要用到 input type="checkbox"

我们首先加一个 input,然后把之前的 button 换成 label ,并且通过 for 属性关联起来。

注意!在 jsx 语法中 for 属性要写成 htmlFor

<div className="wrap">
  <input type="checkbox" id="exp">
  <div className="text">
    <label className="btn" htmlFor="exp">展开</label>
    银泰百货,银泰百货,银泰百货,银泰百货,银泰百货,银泰百货,银泰百货,银,银泰百货,银,银泰百货,银,银泰百货,银,银泰百货,银,银泰百货,银,银泰百货,银
  </div>
</div>

这样,在点击 label 的时候,实际上是点击了 input 元素

现在来添加两种状态,分别是只显示 2 行和不做行数限制

<style>
.exp:checked+.text{
  -webkit-line-clamp: 999; /* 设置一个足够大的行数即可 */
}
</style>

兼容版本可以直接设置最大高度 max-height 为一个较大的值,或者直接设置为 none

<style>
.exp:checked+.text{
  max-height:none;
}
</style>

展开 按钮在点击后应该变成 收起 ,使用 伪类 content 生成技术

具体做法就是去除或者隐藏按钮里面的文字,采用伪元素生成

<label class="btn" for="exp"></label> <!-- 去除按钮文字 -->
<style>
.btn::after{
  content:"展开"; /* 采用content 生成 */
}
</style>

添加 .checked 状态

<style>
.exp:checked+.text .btn::after{
  content:"收起";
}
</style>

三、文本行数的判断

当文本较少时,此时是没有发生截断,需要隐藏展开按钮,CSS 是没有这类逻辑判断

大多数我们都需要从别的角度,采用 “障眼法” 来实现

在文本末尾添加一个元素,为了不影响原有布局,这里设置了绝对定位,这里用 .text::after 伪元素来代替

把刚才这个元素设置一个足够大的尺寸,比如 100% * 100%

<style>
.text::after{
  content: ' ';
  width:100%;
  height:100%;
  position: absolute;
  background: #fff;
}
</style>

那么如果此时文本没有截断,这个元素会把按钮覆盖掉,如果有截断,这个元素会往下移,就不会覆盖按钮

image.png

点击展开后按钮丢失,无法收起

image.png

此时,我们可以添加一下 :checked 状态即可,在展开时隐藏覆盖层

<style>
.exp:checked+.text::after{
  visibility:hidden;
}
</style>

image.png

这样,就实现了在文字较少的情况下隐藏展开按钮的功能

image.png



相关文章
|
8天前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
12 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
23天前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
50 28
|
2月前
|
前端开发
使用CSS样式化占位文本
使用CSS样式化占位文本
16 0
|
2月前
|
前端开发
CSS——通过CSS实现展示更多选项和收起
CSS——通过CSS实现展示更多选项和收起
24 0
|
3月前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
3月前
|
前端开发
你不知道的css——4. 基线、中线、x-height、单位ex(含文本与图标对齐技巧)
你不知道的css——4. 基线、中线、x-height、单位ex(含文本与图标对齐技巧)
35 2
|
3月前
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
59 1
|
3月前
|
前端开发 容器
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
CSS【详解】对齐 (含文本垂直对齐,文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐,图片和文本对齐等)
50 0
|
3月前
|
前端开发
css 实现打字特效(仅支持单行文本)
css 实现打字特效(仅支持单行文本)
27 0
|
前端开发
CSS文本加省略号
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82766836 ...
966 0