Home > Net >  Display last two lines of a large text in a div
Display last two lines of a large text in a div

Time:07-10

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.

CodePudding user response:

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 >
  <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>

  • Related