Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Display last two lines of a large text in a div

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

upon a print medium (such as paper or cloth),
thereby transferring the ink.

>Solution :

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>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading