css实现文字展开收起

实现文字展示和收起主要分为两部分：
1.页面的样式

<div class="content" style="min-height: 30px"><input type="checkbox" id="exp" /><div class="textLsjc" id="jyfw"><span><label class="jyfwbtn" for="exp"></label></span><p style="word-break: break-word">生物科技研发与应用；批发、零售：预包装食品、保健品、日用百货、化妆品、工艺礼品、家用电器、家具、厨房用品、办公用品、五金制品、箱包、服装、皮革制品；货物进出口、技术进出口。（依法须经批准的项目，经相关部门批准后方可开展经营活动）生物科技研发与应用；批发、零售：预包装食品、保健品、日用百货、化妆品、工艺礼品、家用电器、家具、厨房用品、办公用品、五金制品、箱包、服装、皮革制品；货物进出口、技术进出口。（依法须经批准的项目，经相关部门批准后方可开展经营活动）生物科技研发与应用；批发、零售：预包装食品、保健品、日用百货、化妆品、工艺礼品、家用电器、家具、厨房用品、办公用品、五金制品、箱包、服装、皮革制品；货物进出口、技术进出口。（依法须经批准的项目，经相关部门批准后方可开展经营活动）</p></div>
</div>

2.css样式

.content {display: flex;
}.textLsjc {font-size: 14px;/* 设置多行文本溢出省略 */display: -webkit-box;/* 默认最多显示3行 */-webkit-line-clamp: 3;overflow: hidden;-webkit-box-orient: vertical;
}/* 按钮右下角文字环绕布局 */
/* 设置伪元素是为了将按钮挤到底部 */
.textLsjc::before {content: '';float: right;width: 0;/* 因为text的height是动态改变的，所以得设置text父元素flex布局，否则下面的height用100%设置无效*//* 19px为按钮文字高度 *//* height: calc(100% - 19px); *//* margin实现，性能比calc要好 */height: 100%;margin-bottom: -19px;
}.jyfwbtn {float: right;clear: both;cursor: pointer;color: #959595;background: #eeeeee;line-height: 20px;padding: 0px 6px;
}/* 伪元素设置按钮文本*/
.jyfwbtn::after {content: '展开全部';
}/* 隐藏checkbox */
#exp {display: none;
}/* 通过兄弟选择器设置展开后的样式 */
#exp:checked + .textLsjc {/* 展开设置一个足够大的行数 */-webkit-line-clamp: 999;
}#exp:checked + .textLsjc .jyfwbtn::after {content: '收起';
}

css实现文字展开收起相关推荐

vue控制多行文字展开收起
这里讲一下,如何使用vue控制多行文字展开收起(也叫控制文字展开隐藏). 效果: 这里设置了控制三行,如果超过三行会展示,"显示更多" 超出文字显示省略号. 点击"显示更 ...
vue中多行文本标签_vue控制多行文字展开收起的实现示例
这里讲一下,如何使用vue控制多行文字展开收起(也叫控制文字展开隐藏). 效果: 这里设置了控制三行,如果超过三行会展示,"显示更多" 超出文字显示省略号.点击"显示更多 ...
html css侧边展开收起,css实现侧边展开收起
**前言:**因为突然想研究研究侧边栏滑动展开收起怎么做的,就去baidu了一下transition. 先来看一下我的代码: 详情内容1 内容1 内容1 内容1 内容1 .detail { posi ...
仿微信朋友圈，文字展开全文，全文收起功能
简单操作4步即可实现文字展开收起功能: 1.布局写2个Textview 一个是内容一个是按钮(收起和全文) <TextView android:layout_marginTop="@ ...
css 文本、文字展开与收缩，查看更多收起
<view class='containers'><text class="content {{ellipsis?'ellipsis':'unellipsis'}}&quo ...
html 文字折叠行展开,CSS 实现多行文本“展开收起”
多行文本展开收起是一个很常见的交互, 如下图演示实现这一类布局和交互难点主要有以下几点位于多行文本右下角的"展开收起"按钮 "展开"和"收起&quo ...
多行文本展开收起（css）
纯css来实现多行文本展开收起的效果. 1.实现文本超出部分省略单行文本: .text{width: 250px;overflow:hidden;text-overflow: ellipsis;wh ...
vue中实现文字超过2行... 展开-收起(兼容ie)
先看看实际效果 2.需求一步一步分析当文字超出省略号就想到css样式实现(ie不兼容) overflow: hidden; text-overflow: ellipsis;display: -we ...
Vue.js实现文字超出指定高度后展开收起功能
参考网站效果爱企查:https://aiqicha.baidu.com/company_detail_28783255028393 天眼查:https://www.tianyancha.com/co ...

css实现文字展开收起

css实现文字展开收起相关推荐

最新文章

热门文章