I need to hide a part of the text that is longer than 2 lines and add '...123 T.'
as an indicator of the hidden overflow, like below:
What I have so far: https://plnkr.co/edit/NTlv4NpyhRTzJkNQ?preview
Html:
<div class="outside-container">
<span class="container">
<span class="main-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi,
dapibus sit amet posuere eu, porttitor condimentum nulla. Donec
convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam
sollicitudin lacus ipsum, at tincidunt ante condimentum vitae.
</span>
<span class="small-text">123 T.</span>
</span>
<span class="container">
<span class="main-text">
Lorem ipsum
</span>
<span class="small-text">123 T.</span>
</span>
<span class="container">
<span class="main-text">
Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus
</span>
<span class="small-text">123 T.</span>
</span>
</div>
CSS:
.outside-container {
width: 200px;
}
.container{
max-width: 200px;
}
.main-text {
overflow: hidden;
vertical-align: middle;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.small-text {
color: #8e8f8f ;
font-size: 10px;
vertical-align: middle;
}
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…