Css ellipsis on second line

html

responsive-design

css-only

cross-browser

byAnton Shumikhin·Jan 5, 2025

Quickly deploy ellipsis after the second line of text with CSS using a group of WebKit-specific properties: display: -webkit-box;, -webkit-line-clamp: 2;, and -webkit-box-orient: vertical;. This combination generates a box confined to two lines with the excess text gracefully hidden and the ellipsis perfectly placed. However, as this is strictly WebKit-specific, it won't play nicely with all browsers. For an exact fit, ensure the max-height equals twice your line-height.

.two-line-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Maximum number of lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 3.2em; /* Should be 2 * line-height */
}

<div class="two-line-ellipsis">
  Long text wants to explore the wilderness but we have to reign it in…
</div>

Note: The max-height in the .two-line-ellipsis class should mirror your unique line-height.

The cross-browser tools and tricks

While the WebKit method is a sleek sprinter, the marathon of cross-browser compatibility warrants a little more groundwork with complementary approaches or fallbacks. For instances where line-clamp takes a rain check, we can call upon JavaScript tools or innovative CSS maneuvers to take up the baton.

JavaScript libraries: dotdotdot to the rescue

A trusty way to ensure cross-browser multiline ellipsis is by swooping in with a JavaScript library, like dotdotdot. Integrating this plugin is as easy as nodding, offering a flexible solution that can contend with dynamic content, resizes, and even nested elements.

$('.multiline-text').dotdotdot({
  height: 100, // Maximum height or how long the text leash should be
});

A CSS-only magic trick with pseudo-elements

A crafty CSS-only method involves pulling ::after pseudo-element out of the hat, coupled with absolute positioning to fake an ellipsis. It won't match the fluidity of WebKit methods or JavaScript but duty calls for static content.

.ellipsis-fallback::after {
  content: '...'; /* '...' or speechless onomatopoeia */
  position: absolute;
  bottom: 0;
  right: 0; /* Run out of space. Sorry, text! */
}

A future `max-lines` prophecy

While we do the heavy lifting today, keep an ear to the ground for W3C's potential max-lines property. This could become a standard solution in the future. Until then, let's stick to the progressive enhancement ethos to offer all users a basic (but friendly) experience while enhancing the experience for those with modern browsers.

Nailing the truncation quirks

Managing text overflow comes with its own bag of quirks: localization, responsiveness, and the size of the box hosting our text. Let's unscrew these quirks one by one.

Counting the words in a world of languages

In the Babel of multilingual websites, an ellipsis could stretch or shrink. Make sure your layout stays robust to varying text lengths across languages for consistency.

Meeting the demands of fluid screens

In a responsive design playground, truncated text morphs differently at various breakpoints. It's critical to test your methods across devices, ensuring they don't call in sick unpredictably.

Anchors aweigh with proper truncating

When working with an anchor link with ellipsis, the truncation needs to be visibly anchored. The CSS remains roughly similar, but ensuring the anchor is block displayed crisply secures the text.

.truncated-link {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

explain-codes / Html / Css ellipsis on second line

Linked

Insert ellipsis (...) into HTML tag if content too wide



Text-overflow: ellipsis not working



With CSS, use "..." for overflowed block of multi-lines



Overflow:hidden dots at the end



How can I show dots ("...") in a span with hidden overflow?



Wrap a text within only two lines inside div



Insert line break inside placeholder attribute of a textarea?



The cross-browser tools and tricks Nailing the truncation quirks