点击按钮时展开,文本铺满后收起,全程无js代码,不获取dom元素实现这个过程。
毫无疑问需要有一个总体的容器包裹以下元素:text内容,按钮
由于纯css实现,则需要利用input的checkbox + label for来实现点击按钮的操作。
<div class="content">
<input type="checkbox" id="check" class="handle">
<div class="text">
<label for="check" class="btn"></label>
</div>
</div>
将label的状态与checkbox是否选中的状态绑定,当checked被选中时说明点击了展开按钮,没有checked时说明是收起状态。
注:需将checkbox隐藏:
#check{
display:none
}
先设置content容器的样式:
.content{
background-color:blue;
width:500px;
padding:10px;
border-radius: 5px;
box-shadow:5px 1px 5px 1px rgba();
}
设置text文本的样式:
此处用到-webkit-box:弹性伸缩盒子,属性:-webkit-line-clamp:3代表默认只显示三行,overflow:hidden;代表溢出部分隐藏,-webkit-box-orient: vertical代表块级元素中的子元素垂直排列的排列。
.text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
position: relative;
}
在文本元素前添加伪元素,实现动态高度的变化,文字环绕的效果。
.text::before {
content: '';
float: right;
width: 0px;
height: calc(100% - 16px);
}
以上,文字部分就差不多设置完啦,现在到按钮部分。
先设置类名为btn的label,将他设置成一个按钮的模样,也就是宽高10+px,文字行高,内外边距,圆角,鼠标悬停时出现小手手,这些都是要考虑的哦。
.btn {
border-radius: 5px;
border: none;
color: white;
background-color: #409EFF;
float: right;
clear: both;
height: 14px;
line-height: 14px;
font-size: 14px;
padding: 1px 5px;
cursor: pointer;
}
按钮的样式设置完了,现在到点击实现”展开“”收起“的步骤了。
1.没有点击时。btn的content为'展开":
.btn::after {
content: '展开'
}
2.当点击按钮后,即checkbox属性变为已选中的状态,即类名为handle:checked,也就是点击”展开“,此时文本框text的高度 行数 应该变大足以装下剩下的文字。
.handle:checked+.text {
/*被点击之后(展开)设置一个足够大的行数*/
-webkit-line-clamp: 999;
}
3.同时,btn的content应该变为”收起“
.handle:checked+.text .btn::after {
content: '收起'
}
以上完成展开 收起的css实现操作。
还记得我最初是把默认显示行数设置成为3的吗?-webkit-line-clamp:3。
可是如果文字只有一行的话,无需展开,那是不是需要把按钮清除掉呢?答案是一定的。
即添加覆盖层,在文字较少时用与背景颜色一样的伪层覆盖掉按钮
此处用到定位,该覆盖层是相对于text内容而言的,存在于text内容里,属于text的子元素,所以是absolute,那么text同时要加上relative相对定位。
.text::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
background: blue;
}
大功告成咯。其实js两句代码就解决的事情。