展开、收起 多行省略...
基本DOM结构
import React from 'react'
import './index.less'
const ShopSearch = (props: any) => {
// 请求数据
return (
<div className="multi-line-wrap">
<input type="checkbox" id="exp" />
<div className="multi-line">
<label className="multi-line-btn" htmlFor="exp" />
贝多芬、米开朗琪罗、托尔斯泰有不同的事业,不同的身份,来自不同的国家,存在于不同的时代,然而一个共同的特点使三个人共为“名人”——在磨难面前不倒且从未失去对广大人民的热爱与同情。无论是生理还是心理,可控与不可控的挫折与磨难,他们虽感到痛苦,但他们不愿倒下,且心中的博爱之火从未熄灭,只会愈燃愈烈,即使是所爱的人给予他们以不幸。他们被称为英雄,不是借强力以制胜者,而是人类的忠仆,倾心为人民服务,“靠心灵而伟大的人”。
</div>
</div>
)
}
export default ShopSearch
css样式
@lineHeight: 26px;
@fontSize: 16px;
@lineNum: 4;
@lineEm: 1.5;
@bgColor: #fff;
@btn-bgColor: rgb(57, 119, 253);
.multi-line-wrap {
display: flex;
width: 700px;
overflow: hidden;
border-radius: 8px;
padding: 15px;
.multi-line {
font-size: @fontSize;
overflow: hidden;
text-overflow: ellipsis;
text-align: justify;
// .line-clamp;
line-height: @lineEm;
max-height: calc(@lineNum * @lineEm * 1em);
position: relative;
transition: 0.3s all;
background: @bgColor;
&::before {
content: '';
float: right;
width: 0px;
height: calc(100% - @lineHeight + 2px);
background: red;
}
&::after {
content: '';
width: 999vw;
height: 999vw;
position: absolute;
box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 @bgColor;
margin-left: -100px;
}
.multi-line-btn {
position: relative;
float: right;
clear: both;
margin-left: 20px;
font-size: @fontSize;
padding: 0 8px;
background: @btn-bgColor;
line-height: calc(@lineHeight - 2px);
border-radius: 4px;
color: rgb(59, 59, 59);
cursor: pointer;
border: 0;
&::after {
content: '展开'; /*采用content生成*/
}
&::before {
content: '...';
position: absolute;
left: -5px;
top: 0;
color: rgb(61, 60, 60);
transform: translateX(-100%);
}
}
}
#exp {
position: fixed;
left: -10000px;
top: 0;
&:checked + .multi-line {
-webkit-line-clamp: 999; /*设置一个足够大的行数就可以了*/
max-height: none;
max-height: 3000px; /*超出最大行高度就可以了*/
&::after {
visibility: hidden;
}
.multi-line-btn {
&::after {
content: '收起'; /*采用content生成*/
}
&::before {
content: '';
}
}
}
}
}
.line-clamp {
display: -webkit-box;
-webkit-line-clamp: @lineNum;
-webkit-box-orient: vertical;
overflow: hidden;
}
效果图:
合起.png展开.png
正常.png
网友评论