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...

相关推荐
gnip7 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫8 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel8 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼9 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手13 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法13 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku13 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode13 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu13 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu13 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript