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

Compatibility tips

The -webkit-line-clamp method leans on WebKit browsers (like Chrome and Safari). To maximize browser compatibility, you may need to add a gradient for a classy fade-out effect or engage JavaScript for the heavy lifting.

jQuery to the rescue

When CSS falls short, jQuery plugins come to aid with multiline text overflow. Contenders include dotdotdot, jquery.autoellipsis, and jquery-truncate.

Here's a 'dotdotdot' plugin example:

$(".multiline").dotdotdot({
  /* Here goes your secret sauce */
});


Remember, with great plugins, comes great performance responsibility. Choose wisely!

That smooth fade-out effect with CSS

Ellipsis isn't your only option—why not confuse users with a fancy gradient effect to suggest text overflow? A linear gradient over the last visible line grants a cool transition to the void behind.

Behold:

.fade-out {
  position: relative;
  max-height: 4.5em; // Guess where 'em' comes from? Emmentaler cheese holes!
  overflow: hidden;
  line-height: 1.5em;
}

.fade-out:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 1.5em;
  background: linear-gradient(to right, transparent, white 50%);
}


Blend this with max-height and overflow: hidden. Voila! Your text is trimmed without tripping over word boundaries.

Designing with text balances

Multi-line truncation ain't just about ellipses—it plays with:

• Background colors: Get your paintbrushes! Match the background color with the ellipsis or gradient for a neat layout.
• Line-height and Layout: Make the container height and line-height dance to the tune of your text to avoid text cut-offs.
• Ellipsis Alignment: Reserve a VIP seat for the ellipsis, best at the last line's right.

Creative CSS techniques

For non-Webkit browsers, pseudo-elements and absolute positioning sneakily add a multi-line ellipsis. Use highlighted elements to disappear the ellipsis when text doesn't overflow.

Cross-platform adaptation

Multi-line ellipsis isn't a one-size-fits-all solution. You'll need to juggle:

• Legacy Support: Bend the rules for charming oldies like IE9.
• Reserved Spaces: Display a fixed-width blank or background-hued space for the ellipsis.
• Responsive Techniques: Adjusting line lengths, font size, and container height to ensure cross-device consistency.
• JavaScript as fallback: When all else fails, JavaScript lends a helping hand.

Manage these tricks and turns for a well-optimized, user-friendly experience while handling text overflow.