How to set div height to specific number of lines of text?-CodePudding

I have this code basically (in React):

const clampStyling = {
  display: '-webkit-box',
  WebkitLineClamp: lines,
  webkitBoxOrient: 'vertical',
  overflow: 'hidden',
  textOverflow: 'ellipsis',
};

<div style={clampStyling}>20 lines worth of text...</div>

When there are over 15 lines worth of text (and lines is equal to 15), the div correctly displays ellipsis and is 15 lines tall. However, when it is only 5 or 10 lines in content length, and lines is still 15, it only fills up the area up to 5 or 10 lines (the div is only that high).

How do I make it so the div is always 15 lines tall, no matter how much or little content it has?

CodePudding user response：

add height: 15em; to your CSS.

CodePudding user response：

If I understand this correctly, you want the height of <div> to 15 times the height of a line always (regardless of how many lines are present in the div).

For this first define the height of a line.

Now define the <div> height as, height = 15 * line height

.clampStyling {
  display: -webkit-box;
  Webkit-line-clamp: 15;
  webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1em; /* Define height of line */
  height: 15em; /* height of div = 15 * lineheight */
  background-color: #ccc;
}

<div >
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

CodePudding user response：

Use relative unit 'em',

em : Font size of the element.

For 15 lines of height:

         height: 15em;

See this link: https://www.w3schools.com/cssref/css_units.asp