html 文字折叠行展开,CSS 实现多行文本“展开收起”

多行文本展开收起是一个很常见的交互，如下图演示

实现这一类布局和交互难点主要有以下几点位于多行文本右下角的“展开收起”按钮

“展开”和“收起”两种状态的切换

当文本不超过指定行数时，不显示“展开收起”按钮

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

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

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

假设有这样一个 html 结构

浮动元素是如何定位的

正如我们前面提到的那样，当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

多行文本超出省略大家应该很熟悉这个了吧，主要用到用到line-clamp，关键样式如下.text {

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

html 文字折叠行展开,CSS 实现多行文本“展开收起”相关推荐

文字折叠特效 html+css
效果: 实现: 1. 定义标签: <h1>aurora</h1> 2. 设置文字基本样式: h1{text-transform: uppercase;letter-spacin ...
html那种折叠文字内容怎么实现,html+css实现文字折叠特效实例
本文主要介绍了html+css实现文字折叠特效实例,分享给大家,具体如下: 效果: 实现: 1. 定义标签: aurora 2. 设置文字基本样式: h1{ text-transform: upper ...
css 多行文字左对齐,纯CSS实现文字一行居中，多行左对齐的方法
其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动 ...
div css文字字体行高行距深入理解css行间距设置
div css文字字体行高行距 DIVCSS5带您深入理解css行间距设置,字体行距如何最简单地设置. 在文章中,要实现调节设置每行文字字体间距(行距)是使用line-height属性. 要使得每行的 ...
html文字折叠隐藏出现问题,javascript实现文字隐藏、展开收起的简单示例
感兴趣javascript实现文字隐藏.展开收起的简单示例的小伙伴,下面一起跟随编程之家 jb51.cc的小编来看看吧. function init(){ var len = 14; //默认显示字数 ...
多行文本展开收起（css）
纯css来实现多行文本展开收起的效果. 1.实现文本超出部分省略单行文本: .text{width: 250px;overflow:hidden;text-overflow: ellipsis;wh ...
css 文字过长省略号,css实现文字过长显示省略号的方法
因为网页排版的需要,有些地方需要过长的问题加上省略号.比如:标题限制20个中文的宽度,超出的就用省略号代替.之前会使用程序截取的方法,不过使用css来截取更有利于SEO. 下面就介绍一下具体的使用方法 ...
css设置1.5倍行高,CSS怎么控制行高？
CSS怎么控制行高? css中,调整每行文字字体间距(行距)是使用line-height属性. ● line-height 属性设置行间的距离(行高). 注:不允许使用负值. 要实现上下换行文字行间距 ...
html表格展开明细,Element-ui的Table表格展开行功能
业务需要表格能够展开某一行,但组件中只能展开所有行,或者用table的树形数据(row 中需包含 children字段),可以通过控制 row-class-name来定义表格中需要展开的行. 通过设置 ...

html 文字折叠行展开,CSS 实现多行文本“展开收起”

html 文字折叠行展开,CSS 实现多行文本“展开收起”相关推荐

最新文章

热门文章

html 文字折叠行 展开,CSS 实现多行文本“展开收起”

html 文字折叠行 展开,CSS 实现多行文本“展开收起”相关推荐

最新文章

热门文章

html 文字折叠行展开,CSS 实现多行文本“展开收起”

html 文字折叠行展开,CSS 实现多行文本“展开收起”相关推荐