-
Notifications
You must be signed in to change notification settings - Fork 132
New issue
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
CSS 实现多行文本展开收起效果 #120
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
最终实现效果:
本文主要实现难点:
展开
和收起
切换按钮的文字环绕效果展开
和收起
的状态切换初始 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: