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

相关推荐
切糕师学AI8 分钟前
前后端分离架构中,Node.js的底层实现原理与线程池饥饿问题解析
前端·vue.js·node.js
妄小闲27 分钟前
网页设计模板 HTML源码网站模板下载
前端·html
icebreaker43 分钟前
tailwindcss 究竟比 unocss 快多少?
前端·css·github
卢叁1 小时前
Flutter之自定义TabIndicator
前端·flutter
每天吃饭的羊1 小时前
state和ref
前端·javascript·react.js
GEO_YScsn1 小时前
Vite:Next-Gen Frontend Tooling 的高效之道——从原理到实践的性能革命
前端·javascript·css·tensorflow
GISer_Jing1 小时前
滴滴二面(准备二)
前端·javascript·vue·reactjs
ningmengjing_1 小时前
webpack打包方式
前端·爬虫·webpack·node.js·逆向
摇滚侠1 小时前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记03
javascript·笔记·typescript
Yuner20001 小时前
Webpack开发:从入门到精通
前端·webpack·node.js