Wrap a text within only two lines inside div

html

responsive-design

css

performance

byAlex Kataev·Sep 29, 2024

To wrap text inside a div into two lines, use CSS property line-height to define single line height with max-height equal to double the line-height. Add overflow: hidden; to cut off extra text and text-overflow: ellipsis; to show a "..." as an indication of more content. For example:

.two-lines {
  display: block;  /* blocks party like its 1999 */
  line-height: 1.2em;
  max-height: 2.4em; /* twice the groove */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* keep it together, man */
 }

<div class="two-lines">
  Lengthy text demonstrating that the text wraps in two lines. If the text is longer, it's truncated and ellipsis is shown.
</div>

Note that the text does not break lines due to the white-space: nowrap; property. For multiline ellipses, we need additional CSS properties.

Understanding CSS in depth

Adaptation across various screens

In responsive design, the ellipsis should adapt to varying div widths. For this, use vendor-prefixed CSS properties to get a multi-line truncation that works regardless of how many characters or what width the container div is.

.multi-line-ellipsis {
  overflow: hidden;
  display: -webkit-box;  /* every apple aficianado's best friend */
  -webkit-line-clamp: 2;  /* don't play more than 2 songs */
  -webkit-box-orient: vertical;  /* keep it upright, boss */
}