css实现元素内容过高时自动出现展开收起按钮
1. css
.content { width: 600px; margin: 0 auto; max-height: 200px; overflow: hidden; border-radius: 4px; outline: 2px dashed royalblue; } .section { display: flex; } .content::before { content: ''; width: 100px; height: 100%; float: left; } .btn { float: right; width: 100px; text-align: center; position: relative; left: calc(50% - 50px); transform: translateY(-100%); cursor: pointer; -webkit-tap-highlight-color: transparent; } .btn::after{ content: ''; display: block; height: 34px; background-color: #666; transition: .2s background-color; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E %3Cpath d='M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z'%3E%3C/path%3E %3C/svg%3E") center/ 24px 24px no-repeat; } .btn:hover::after { background-color: royalblue; } .btn::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; } .text { box-sizing: border-box; width: 100%; padding: 10px 15px; float: right; line-height: 1.5; margin: 0; margin-left: -100px; font-size: 18px; color: #232323; } .checkbox:checked+.content{ max-height: fit-content; } .checkbox:checked+.content .btn{ left: auto; right: calc(50% - 50px); } .checkbox:checked+.content .btn::after{ transform: scaleY(-1); }
2. html
{style.section}> style.checkbox} type="checkbox" id="c1" hidden {style.content}> {style.text}> hello1
hello2
hello3
hello4
hello5
hello6
hello7
hello8
hello1
hello2
hello3
hello4
hello5
hello6
hello7
hello8
style.btn} htmlFor="c1"
(图片来源网络,侵删)
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。