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

需求：多行文本的省略和隐藏。在文本末尾实现文字环绕"展开/收起"。

实现思路

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

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

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

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

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

1.1 多行文本截断

html 复制代码

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

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

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

html 复制代码

<!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: -22px;
            background: red
        }
        .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实现

html 复制代码

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

js 复制代码

data() {
	return {
		isOpen: false
	}
}

css 复制代码

.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;
		background: red
	}
	&.noheight {
		max-height: none;
	}
}
.expand {
	float: right;
	clear: both;
	font-size: 28rpx;
	color: #f00;
	color: #5C83B1;
	&.open::before {
		content: '...';
		color: #333;
		margin-right: 10px; 
	}
	&.open::after {
		content: "展开";
	}
	&.close::after {
		content: "收起";
	}
}

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