css 实现多行文本展开收起操作(兼容ios）

杨梦馨
2,708 阅读9分钟

需求：多行文本的省略和隐藏。在文本末尾实现文字环绕“展开/收起”。
注：文章末端附有完整代码，需要自取~

一、 实现思路

实现这一类布局和交互难点主要有以下几点：

  • 位于多行文本右下角的“展开收起”按钮
  • “展开”和“收起”两种状态的切换
  • 当文本不超过指定行数时，不显示“展开收起”按钮

单独看这个布局，即使借助 JavaScript 也不是一件容易的事啊（需要计算文字宽度动态截取文本），更别说下面的交互和判断逻辑了，不过经过我的一番琢磨，其实纯 CSS 也能完美实现的，下面就一步一步来看看如何实现吧~

1. 位于右下角的“展开收起”按钮

很多设计同学都喜欢这样的设计，把按钮放在右下角，和文本混合在一起，而不是单独一行，视觉上可能更加舒适美观。

1.1 多行文本截断

<div class="text">
这里是超多字的详情简介这里是超多字的详情简介这里是超多字的详情简介这里是超多字的详情简介这里是超多字的详情简介这里是超多字的详情简介这里是超多字的详情简介这里是超多字的详情简介这里是超多字的详情简介这里是超多字的详情简介这里是超多字的详情简介这里是超多字的详情简介这里是超多字的详情简介。
</div>

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

1.2 右下角环绕效果

放一个按钮，设置浮动float

<div class="text">
  <button class="btn">展开</button>
  浮动元素是如何定位的？正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
</div>

<style>
.btn{
    float: right;
    margin-top: 50px;
}
</style>

虽然按钮到了右下角，但是文本却没有环绕按钮上方的空间，空出了一大截。虽然 margin 不能解决问题，但是整个文本还是受到了浮动按钮的影响，如果有多个浮动元素会怎么样呢？这里用伪元素来  ::before 代替

.text::before{
  content: '';
  float: right;
  width: 10px;
  height: 50px;/*先随便设置一个高度*/
  background: red;
}
.btn{
    float: right;
    clear: both;/*为了按钮能到伪元素的下面*/
}

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

.text::before{
  content: '';
  float: right;
  width: 0; /*设置为0，或者不设置宽度*/
  height: 50px;/*先随便设置一个高度*/
}

1.3 动态高度

可以用 calc 计算，用整个容器高度减去按钮的高度，注意在外部要包裹一层div并设置 display: flex，这样子项就可以通过百分比来计算变化高度。

<div class="wrap">
  <div class="text">
    <button class="btn">展开</button>
    浮动元素是如何定位的？正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
  </div>
</div>

<style>
    .text::before{
      content: '';
      float: right;
      width: 0;
      height: calc(100% - 24px);
    }
    .wrap{
      display: flex;
    }
</style>

除此之外，动态高度也可以采用负的 margin 来实现（性能会比 calc 略好一点）

.text::before{
  content: '';
  float: right;
  width: 0;
  /*height: calc(100% - 24px);*/
  height: 100%;
  margin-bottom: -1.5em;
}

到这里，右下角环绕的效果就基本完成，省略号也是位于展开按钮之前的，文章末端附有完整代码，需要自取~

1.4 其他浏览器的兼容处理

上面的实现是最完美的处理方式。原本以为兼容性没什么大问题的，毕竟只用到了文本截断和浮动，-webkit-line-clamp 虽然是 -webkit- 前缀，不过 firefox 也是支持的，打开一看傻了眼，safari 和 firefox 居然全乱了！
赶紧打开控制台看看是什么原因。一番查找，结果发现是 display: -webkit-box，设置该属性后，原本的文本好像变成了一整块，浮动元素也无法产生环绕效果，去掉之后浮动就正常了
那么问题来了：没有 display: -webkit-box 怎么实现多行截断呢 ？

其实上面的努力已经实现了右下角环绕的效果，如果在知道行数的情况下设置一个最大高度，是不是也完成了多行截断呢？为了便于设置高度，可以添加一个行高 line-height，如果需要设置成 3 行，那高度就设置成 line-height * 3

.text {
  /*
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  */
  line-height: 1.5;
  max-height: 4.5em;
  overflow: hidden;
}

为了方便更好的控制行数，这里可以把常用的行数通过属性选择器独立出来（通常不会太多）

<!--3行-->
<div class="text" line-clamp="3">
...
</div>
<!--2行-->
<div class="text" line-clamp="2">
 ...
</div>

<style>
    [line-clamp="1"] {
      max-height: 1.5em;
    }
    [line-clamp="2"] {
      max-height: 3em;
    }
    [line-clamp="3"] {
      max-height: 4.5em;
    }
<style>

可以看到基本上正常了，除了没有省略号，现在加上省略号吧，跟在展开按钮之前就可以了，可以用伪元素实现

.btn::before{
  content: '...';
  position: absolute;
  left: -10px;
  color: #333;
  transform: translateX(-100%)
}

这样，Safari 和 Firefox 的兼容布局基本上就完成了~

2. “展开” 和 “收起”  两种状态

提到 CSS 状态切换，大家都能想到 input type="checkbox"  吧。这里我们也需要用到这个特性，首先加一个 input ，然后把之前的 button 换成 label ，并且通过 for 属性关联起来

<div class="wrap">
  <input type="checkbox" id="exp">
  <div class="text">
    <label class="btn" for="exp">展开</label>
    浮动元素是如何定位的？正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。
  </div>
</div>

这样，在点击 label 的时候，实际上是点击了 input 元素，现在来添加两种状态，分别是只显示 3 行和不做行数限制

.exp:checked+.text{
  -webkit-line-clamp: 999; /*设置一个足够大的行数就可以了*/
}
.exp:checked+.text{
  max-height: none; /*兼容版本可以直接设置最大高度为一个较大的值，或者直接设置为none*/
}

“展开”按钮在点击后应该变成“收起”，如何修改呢？
有一个技巧，凡是碰到需要动态修改内容的，都可以使用伪类 content 生成技术，具体做法就是去除或者隐藏按钮里面的文字，采用伪元素生成

<label class="btn" for="exp"></label><!--去除按钮文字--
<style>
    .btn::after{
      content:'展开' /*采用content生成*/
    }
    
    .exp:checked+.text .btn::after{
      content:'收起' /* 添加 :checked状态 */
    }
</style>

兼容版本由于前面的省略号是模拟出来的，不能自动隐藏，所以需要额外来处理

.exp:checked+.text .btn::before {
    visibility: hidden; /*在展开状态下隐藏省略号*/
}

还有一点，如果给 max-height 设置一个合适的值，注意是合适的值，还能加上过渡动画

.text{
  transition: .3s max-height;
}
.exp:checked+.text{
  max-height: 200px; /*超出最大行高度就可以了*/
}

3. 文本行数的判断

上面的交互已经基本满足要求了，但是还是会有问题。比如当文本较少时，此时是没有发生截断，也就是没有省略号的，但是“展开”按钮却仍然位于右下角，如何隐藏呢？
通常 js 的解决方式很容易，比较一下元素的 scrollHeight 和 clientHeight 即可，然后添加相对应的类名。下面是伪代码

if (el.scrollHeight > el.clientHeight) {
  // 文本超出了
  el.classList.add('trunk')
}

那么，CSS 如何实现这类判断呢？
可以肯定的是，CSS 是没有这类逻辑判断，大多数我们都需要从别的角度，采用 “障眼法” 来实现。比如在这个场景，当没有发生截断的时候，表示文本完全可见了，这时，如果在文本末尾添加一个元素（红色小方块），为了不影响原有布局，这里设置了绝对定位

.text::after {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    background: red;
}

可以看到，这里的红色小方块是完全跟随省略号的。当省略号出现时，红色小方块必定消失，因为已经被挤下去了，这里把父级 overflow: hidden 暂时隐藏就能看到是什么原理了
然后，可以把刚才这个红色的小方块设置一个足够大的尺寸，比如 100% * 100%
现在把背景改为白色（和父级同底色），父级  overflow: hidden 重新加上

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

现在展开以后，发现按钮不见（被刚才那个伪元素所覆盖，并且也点击不了），如果希望点击以后仍然可见呢？添加一下 :checked 状态即可，在展开时隐藏覆盖层

.exp:checked+.text::after{
    visibility: hidden;
}

4. 总结和说明

  • 文本环绕效果首先考虑 浮动 float
  • flex 布局子元素可以通过百分比计算高度
  • 多行文本截断还可以结合文本环绕效果用 max-height 模拟实现
  • 状态切换可以借助 checkbox
  • CSS 改变文本可以采用伪元素生成
  • 多利用 CSS 遮挡 “障眼法”

二、 方案一源码分享： html+css实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            display: flex;
        }
        .text {
            line-height: 1.5;
            max-height: 4.5em;
            overflow: hidden;
            transition: all 1s;
        }
        .text::before {
            content: '';
            float: right;
            height: 100%;
            margin-bottom: -1.5em;
        }
        .btn {
            float: right;
            clear: both;
            font-size: 14px;
            color: #f00;
        }
        .btn::before {
            content: '...';
            color: #333;
        }
        .btn::after {
            content: "展开";
        }
        #check {
            display: none;
        }
        #check:checked+.text {
            max-height: none;
        }
        #check:checked+.text>.btn::after {
            content: "收起";
        }
        /* 隐藏省略号 */
        #check:checked+ .text>.btn::before {
            visibility: hidden;  
        }
    </style>
</head>

<body>
    <div class="wrap">
        <input type="checkbox" name="" id="check">
        <div class="text">
            <label for="check" class="btn"></label>
            这里是超多字的详情简介这里是超多字的详情简介这里是超多字的详情简介这里是超多字的详情简介这里是超多字的详情简介这里是超多字的详情简介这里是超多字的详情简介这里是超多字的详情简介这里是超多字的详情简介这里是超多字的详情简介这里是超多字的详情简介这里是超多字的详情简介这里是超多字的详情简介。
        </div>
    </div>
</body>

</html>

三、方案二源码分享： vue+css实现

<view class="wrap" >
	<view class="text" :class="{ noheight: isOpen }">
		<view class="expand" :class="[ isOpen ? 'close' : 'open']" @tap="isOpen =!isOpen"></view>
		{{ text }}
	</view>
</view>

data() {
	return {
		isOpen: false
	}
}


.wrap {
	display: flex;
}
.text {
	line-height: 1.5;
	max-height: 4.5em;
	overflow: hidden;
	transition: all 1s;
	&::before {
		content: '';
		float: right;
		height: 100%;
		margin-bottom: -42rpx;
	}
	&.noheight {
		max-height: none;
                &::after{
                  visibility: hidden;
                }
	}
        &::after{
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            background: #fff;
        }
}
.expand {
	float: right;
	clear: both;
	font-size: 28rpx;
	color: #5C83B1;
	&.open::before {
		content: '...';
		color: #333;
		margin-right: 10px; 
	}
	&.open::after {
		content: "展开";
	}
	&.close::after {
		content: "收起";
	}
}

感谢大神：blog.csdn.net/qiwoo_weekl…

avatar
文章
阅读
粉丝