I have continuous text added to a div, I want to display only the last two lines of the text in the div which is of fixed width. I could split the large text into multiple lines and then show the last two lines in the div but I was checking if there is any out of the box css property on div that can automatically display only last two lines and hide the rest.
Example:
A printing press is a mechanical device for
applying pressure to an inked surface resting
upon a print medium (such as paper or cloth),
thereby transferring the ink.
display only:
upon a print medium (such as paper or cloth),
thereby transferring the ink.
You can try like below:
.box {
width: 280px;
line-height: 1.2em;
height: 2.4em; /* twice the line-height */
overflow: hidden;
display: flex;
align-items: end; /* align at the end to see the last lines */
}
.box p {
margin: 0;
}<div class="box">
<p>
A printing press is a mechanical device for applying pressure to an inked surface resting upon a print medium (such as paper or cloth), thereby transferring the ink.
</p>
</div>