We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
最终实现效果:
本文主要实现难点:
展开
收起
初始 html:
<div class="text"> <label class="btn">展开</label> <span> 但听得蹄声如雷,十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅, 里面玄色布衣,但见人似虎,马如龙,人既矫捷,马亦雄骏,每一匹马都是高头 长腿,通体黑毛,奔到近处,群雄眼前一亮,金光闪闪,却见每匹马的蹄铁竟然 是黄金打就。来者一共是一十九骑,人数虽不甚多,气势之壮,却似有如千军万 马一般,前面一十八骑奔到近处,拉马向两旁一分,最后一骑从中驰出</span> </div> <style> .text { width: 475px; border: aqua solid 1px; color: #333; font-size: 14px; } .btn { color: dodgerblue; cursor: pointer; } </style>
一般展开、收起按钮都在文字的右下脚:
float: right
margin-top
但 margin 虽然可以将按钮局下,但它无法实现文字环绕效果,所以我们这里利用伪元素实现:
margin
.text::before
.text::before{ content: ''; float: right; }
.text::before{ content: ''; float: right; width: 0; height: calc(100% - 20px); }
我们发现出现了高度塌陷( calc(100% - 20px) 无效)的问题:
calc(100% - 20px)
由于包含块的高度没有显式指定,并且该元素不是绝对定位,则计算值伪 auto,auto * 100/100 = NaN — CSS 世界
由于包含块的高度没有显式指定,并且该元素不是绝对定位,则计算值伪 auto,auto * 100/100 = NaN
— CSS 世界
此时解决办法有:
这里包一层 flex 布局。因为在 flex 布局的子项中,可以通过百分比来计算变化高度,因此,这里需要给 .text 包裹一层,然后设置 display: flex
.text
display: flex
<div class="content"> <div class="text"> <label class="btn" for="exp">展开</label> <span> 但听得蹄声如雷,十余乘马疾风般卷上山来。马上乘客一色都是玄色薄毡大氅, 里面玄色布衣,但见人似虎,马如龙,人既矫捷,马亦雄骏,每一匹马都是高头 长腿,通体黑毛,奔到近处,群雄眼前一亮,金光闪闪,却见每匹马的蹄铁竟然 是黄金打就。来者一共是一十九骑,人数虽不甚多,气势之壮,却似有如千军万 马一般,前面一十八骑奔到近处,拉马向两旁一分,最后一骑从中驰出</span> </div> </div>
<style> .content { display: flex; } .text::before{ content: ''; float: right; height: 100%; margin-bottom: -20px; } .btn { float: right; clear: both; margin-right: 8px; } </style>
我们在 CSS 实现文本的单行和多行溢出省略效果 介绍过:
多行文本(css)
.text { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
-webkit-line-clamp: 3
display: -webkit-box
-webkit-box-orient: vertical
overflow: hidden
text-overflow: ellipsis
使用 input type="checkbox" 控制展开与收起效果
input type="checkbox"
<input type="checkbox" id="exp" /> <style> #exp { visibility: hidden; } #exp:checked+.text{ -webkit-line-clamp: 999; /*设置一个足够大的行数就可以了*/ } </style>
但文字展开后控制按钮依然显示 展开 ,应该显示 收起 才对
这里使用伪类生成技术,具体做法就是去除或者隐藏按钮里面的文字,采用伪元素生成
<label class="btn" for="exp"></label> <style> .btn::after{ content:'展开' } #exp:checked+.text .btn::after{ content:'收起' } </style>
最终,大功告成:
The text was updated successfully, but these errors were encountered:
No branches or pull requests
最终实现效果:
本文主要实现难点:
展开
和收起
切换按钮的文字环绕效果展开
和收起
的状态切换初始 html:
控制按钮文字环绕效果
一般展开、收起按钮都在文字的右下脚:
float: right
margin-top
但
margin
虽然可以将按钮局下,但它无法实现文字环绕效果,所以我们这里利用伪元素实现:float: right
.text::before
局右
局下
我们发现出现了高度塌陷(
calc(100% - 20px)
无效)的问题:此时解决办法有:
这里包一层 flex 布局。因为在 flex 布局的子项中,可以通过百分比来计算变化高度,因此,这里需要给
.text
包裹一层,然后设置display: flex
多行文本溢出省略效果
我们在 CSS 实现文本的单行和多行溢出省略效果 介绍过:
多行文本(css)
-webkit-line-clamp: 3
(用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行。 为了实现该效果,它需要组合其他的WebKit属性)display: -webkit-box
(和 1 结合使用,将对象作为弹性伸缩盒子模型显示 )-webkit-box-orient: vertical
(和 1 结合使用 ,设置或检索伸缩盒对象的子元素的排列方式 )overflow: hidden
(文本溢出限定的宽度就隐藏内容)text-overflow: ellipsis
(多行文本的情况下,用省略号“…”隐藏溢出范围的文本)如何实现
展开
和收起
的状态切换使用
input type="checkbox"
控制展开与收起效果但文字展开后控制按钮依然显示
展开
,应该显示收起
才对这里使用伪类生成技术,具体做法就是去除或者隐藏按钮里面的文字,采用伪元素生成
最终,大功告成:
The text was updated successfully, but these errors were encountered: