纯css控制文字显示隐藏

用到css 伪类 :checked
:checked 选择器匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。
html

<div class="box"><input type="radio" name="clickInput" value="0" id="Input1" hidden><label class="label1" for="Input1">更多</label><input type="radio" name="clickInput" value="1" id="Input2" hidden><label class="label2" for="Input2">收起</label><div class="text">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div>
</div>

css

 .box{position: relative;margin:auto;width: 180px;overflow: hidden;padding-bottom: 20px;}.text{height: 40px;color: #555555;word-break:break-word ;word-wrap: break-word;line-height: 20px;overflow: hidden;}.label1{position: absolute;bottom: 0;left: 0px;height: 20px;line-height: 20px;color: rgb(96,115,232);cursor: pointer;}/*用于调整单选框的属性以及位置*/.label2{position: absolute;bottom: 0;left: 0;height: 20px;line-height: 20px;color: rgb(96,115,232);cursor: pointer;display: none;}/*用于调整单选框的属性以及位置*/#Input1:checked~div{height: auto}/*展开高度*/#Input1:checked~.label1{display: none;}/*隐藏更多*/#Input1:checked~.label2{display: block;}/*显示收起*/#Input2:checked~div{height: 40px;}/*还原高度*/#Input2:checked~.label2{display: none;}/*隐藏收起*/

效果更多和收起按钮切换

就酱了~~

纯css控制文字显示隐藏相关推荐

纯css控制文字2行显示多余部分隐藏
在编写页面的时候,经常遇到一些地方的文字显示1行,多余的文字隐藏,这样显示1行的很好控制: css代码如下: white-space: nowrap; overflow: hidden; text-o ...
css 多行文字左对齐,纯CSS实现文字一行居中，多行左对齐的方法
其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称. 想要实现的效果为: 未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中. 当文字长度大于盒子的宽度,会自动 ...
鼠标经过文字显示隐藏图片css样式
鼠标经过文字显示隐藏图片css样式,js鼠标经过文字显示图片预览效果,css如何实现鼠标移至文本上显示文字或图片.jQuery鼠标经过文字显示二维码代码. 这是一个比较简单的鼠标悬停经过文本显示二维码 ...
CSS控制文字的一些基本属性的使用
CSS控制文字的一些基本属性的使用: 一.CSS控制段落: 段落缩进:text-indent:20px; 文字方向:text-align:center; 文字修饰:text-decoration:un ...
百度地图添加标识物，并能控制标识物显示/隐藏
百度地图添加标识物,并能控制标识物显示/隐藏 <%@ page contentType="text/html;charset=UTF-8"%> <%@ inclu ...
css设置文字溢出隐藏
css设置文字溢出隐藏让文字只显示一行,超出显示省略号多行文本, 显示 n 行,剩下的省略号替代仅仅是用来提示自己,不要忘记的让文字只显示一行,超出显示省略号 overflow: hidden ...
css 控制文字左右对齐
css 控制文字左右对齐: <p class="center">我是两端对齐文字端对齐文字<span></span></p> .ce ...
echarts 控制图例显示隐藏以及自适应的方法
当屏幕大小发生变化,echarts没有进行自适应,我们可以使用它的resize()方法去解决. 当echarts的组件放在el-tabs里面的el-tab-pane切换时,echarts的自适应会跟不 ...
css文字定位最右边,CSS 控制文字定位
CSS 控制文字定位作者:不详来源: 日期:2002-8-5 [code] P.double {line-height: 2} P.right {text-align: right} P.cent ...

纯css控制文字显示隐藏

纯css控制文字显示隐藏

纯css控制文字显示隐藏相关推荐

最新文章

热门文章