Text overflow ellipsis on two lines

html

responsive-design

css

best-practices

byAnton Shumikhin·Nov 25, 2024

To create a two-line ellipsis effect, combine display: -webkit-box;, -webkit-line-clamp: 2;, and -webkit-box-orient: vertical;. Modify max-height to cap the text neatly within two lines.

.ellipsis {
  display: -webkit-box; /* Acts as our super friendly word-wrapper */
  -webkit-line-clamp: 2; /* Dictates our two-line limit */
  -webkit-box-orient: vertical; /* Ensures vertical text flow */
  overflow: hidden; /* Prevents text from trespassing */
  text-overflow: ellipsis; /* Props to all the missing words! */
  max-height: 3em; /* Adjust to your specific two-line height */
}

<div class="ellipsis">
  Watch as the extremely lengthy text here truncates with a neat ellipsis after the second line.
</div>

Note that this method is Webkit-specific (i.e., for browsers like Chrome or Safari) and might not be universally applicable.

Ensuring adaptiveness and consistency

Getting along with different browsers

The -webkit- prefixed properties aren't a hit at every browser party:

Start with basic styles and promote for browsers supporting line-clamp — progressive enhancement in action.
Use @supports feature queries to check browser's -webkit-line-clamp handling capability.
As plan B, ponder on a JavaScript solution for non-Webkit browsers but remember to keep it degradable!

Adapting to changing screen sizes

In a responsive design, containers are like shape-shifters. Here's the hack:

Use media queries to modify max-height according to viewport.
Vary -webkit-line-clamp dynamically for diverse screen sizes.
Test lethally — a single compromise on legibility can spark a UI rebellion.

Using mixins for fast-paced development

SASS mixin can serve as your time-saving sidekick:

@mixin two-line-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Keeps us two-line unswerving */
  -webkit-box-orient: vertical;
  overflow: hidden; /* Has our back by hiding protruding text */
  text-overflow: ellipsis; /* Seamless appliqué of ellipsis...or not! */
}

Incorporate the mixin in your SASS files:

.ellipsis {
  @include two-line-ellipsis;
  max-height: 3em; /* Fix it to match your ideal two-line height */
}

Critical insights

Here are some hidden scroll messages to unlock the mastery:

Checkmate with `max-height`

Use em units for max-height to levy a direct relationship with your typeface scale.
Maintain consistent line height to ward off unwanted overflow.

Deep-diving into mechanics

Unveiling the veiled intricacies:

Resort to the enlightening article by Chris Coyier for the nuts and bolts.
Explore text-overflow property beyond the realm of ellipsis.

Pitfalls to stay clear of

Tread lightly around these pesky bugs:

Avoid white-space: nowrap — it despises wrapping.
Localization can tweak lines — different languages, different line lengths
Different languages imply distinctive text lengths — Ellipsis placement on high alert!

Nailing applied practices

Elevate your skills by delving into advanced know-how:

Working with ready-made examples

Access and dissect a ZIP file with an entire scenario for hands-on learning.
Implement the example code and fine-tune it for a better understanding.

Debugging and troubleshooting

In case of emergency:

Ensure max-height calculations are in sync with your font-size and line-height.
Use browser dev-tools to fine-tune styles and troubleshoot.
Be extra vigilant with render consistency on high-density displays (like Retina screens).