CODEWITHSUNDEEP
htmlcss
Alien
Alien

Reputation: 1162

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

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?

Upvotes: 1

Views: 3146

Answers (3)

Aditya Singh
Aditya Singh

Reputation: 101

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

Upvotes: 2

PR7
PR7

Reputation: 1904

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 class="clampStyling">
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>

Upvotes: 2

John
John

Reputation: 5335

add height: 15em; to your CSS.

Upvotes: 0

Related Questions