need:
As shown in the figure: the ellipsis needs to be displayed at the end of the third line, and there is a view more button to toggle display and hide.
Conventional css processing method:
Control the number of lines of text:
// Multi-line
display.text_morerow { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; // Control the number of display lines -webkit-box-orient: vertical; word-break: break-all ; }
If you just set it like this, the effect is like this:
But we still have a view more button to control the display and hiding of content. How to achieve it? Now we have a new idea,
html part:
<div class="text-spread-container">
<div class="text">我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字我是一大段文字文字</div>
<div class="btn">...查看更多</div>
</div>Parent element fixed container:
.text-spread-container {
position: relative;
overflow: hidden;
max-height:100px;
}
Child element text container:
.text{
color: #1f1f1f;
line-height: 0.22rem;
}
View more button CSS:
.btn {
position: absolute;
right: 0;
bottom: 0;
cursor: pointer;
background-color: #fff;
}
Use pseudo-class visuals to appear to have a gradual fade-out effect
.btn:before {
position: absolute;
right: 100%;
content: "";
width:0.16rem;
height:0.22rem;
background-image: linear-gradient(270deg,#fff,hsla(0,0%,100%,0));
}
We can control the visibility of the view more button by judging whether the height of the .text element is greater than the parent element's max-height 100px. When clicking to view more, the height of the parent element is changed to the same height as the child element, or removed/added The overflow-hidden property is fine.