显示展开收起：
<div class="wrapper">
<input id="exp111" class="exp" type="checkbox">
<div class="text">
<label class="btn" for="exp111"></label>
这是一个测试内容这是一个测试内容这是一个测试内容这是一个测试内容这是一个测试内容这是一个测试内容这是一个测试内容这是一个测试内容这是一个测试内容这是一个测试内容这是一个测试内容这是一个测试内容这是一个测试内容这是一个测试内容这是一个测试内容这是一个测试内容这是一个测试内容这是一个测试内容
</div>
</div>
样式：
.radio-img-wrap{
font-size: 16px;
font-family: PingFang SC-Light, PingFang SC;
font-weight: 400;
color: #000000;
line-height: 22px;
.wrapper {
margin-top: 10px;
display: flex;
width: 100%;
overflow: hidden;
// box-shadow: 20px 20px 60px #bebebe,
// -20px -20px 60px #ffffff;
}
.text {
overflow: hidden;
text-overflow: ellipsis;
text-align: justify;
/* display: flex; */
/* display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical; */
position: relative;
line-height: 22px;
max-height: 66px;
// line-height: 1.5;
// max-height: 4.5em;
transition: .3s max-height;
}
.text::before {
content: '';
height: calc(100% - 22px);
float: right;
}
.text::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
/* box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #fff; */
// margin-left: -100px;
}
.btn{
position: relative;
float: right;
clear: both;
margin-left: 20px;
// padding: 0 8px;
// background: #3F51B5;
// line-height: 24px;
/* margin-top: -30px; */
}
.btn::after{
content:'\e65f';
// font-family:'iconfont';
content:'展开'
}
.exp{
display: none;
}
.exp:checked+.text{
max-height: none;
}
.exp:checked+.text::after{
visibility: hidden;
}
.exp:checked+.text .btn::before{
visibility: hidden;
}
.exp:checked+.text .btn::after{
content:'收起'
}
.btn::before{
content: '...';
position: absolute;
left: -5px;
transform: translateX(-100%)
}
}
显示居中水平线：
<div class="from">
From：Marienne Doe 2023-06-23
</div>
.from::before, .from::after{
content: '';
border-bottom: 1px solid rgba(195, 218, 236, 1);
flex: 1;
margin: auto;
}