Text-overflow: ellipsis not working

html

responsive-design

css

web-development

byNikita Barsukov·Dec 30, 2024

To effectively apply the text-overflow: ellipsis, respect these four horsemen of truncation:

display: block or inline-block
width (specific unit value)
overflow: hidden
white-space: nowrap

CSS snippet:

.ellipsis {
  display: inline-block;  /* pssst, 'block' works too */
  width: 100px;  /* Width, I am your father! */
  overflow: hidden;  /* Hide, but don't seek */
  white-space: nowrap;  /* Screw the wraps, we're dieting */
  text-overflow: ellipsis;  /* Just adding some mystery to life */
}

HTML snippet:

<div class="ellipsis">That's one small step for man, a giant... (you'll never know what)</div>

Ensure these properties are accurately applied, and you have sufficient text to overflow the width setting to visually activate the ellipsis effect.

Multiline ellipsis (the plot thickens)

For multiline text, standard CSS properties follow the rabbit down the hole. Here's an approach using -webkit-line-clamp:

.multiline-ellipsis {
  display: -webkit-box;  /* Are you ready boxes? */
  -webkit-line-clamp: 3;  /* I'll stop you at 3, lines (I mean it!) */
  -webkit-box-orient: vertical;  /* Up, up, and away! */  
  overflow: hidden;   /* Still playing hide-n-seek */
  width: 250px;
  height: 150px;
}

This property is webkit-only (at the moment) but our trusty sidekick Firefox will have support in impending versions.

Cross-Browser Compatibility

Not all browsers wear capes. Test your codes across multiple browsers. For browsers that smirk at -webkit-line-clamp, consider training your JS (Javascript Sidekick) to perform miraculous feats of truncation.

Special Cases and Covering Bases

When your content resides in <pre> or opts to thumb a ride elsewhere when ellipsis calls, resort to word-wrap: break-word;. This ensures long words play by the rules and remain within their container:

.pre-wrap {
  white-space: pre-wrap;
  word-wrap: break-word;  /* Break it down, words! */
  overflow-wrap: break-word; /* When 'word-wrap' is too mainstream */
}

Troubleshooting common roadblocks

When text-overflow: ellipsis seems drunk, check these common pitfalls:

Parent Constraints: If the parent has max-width or padding properties, it may be interfering. Have a chat with them.
Inherited Properties: Ancestors could be passing down properties like white-space that override your intended styles. Family drama. We've all been there.
Dynamic Content: If your content changes faster than a chameleon, container dimensions might need adjustments.
RTL Support: For RTL (right-to-left) languages, combine direction: rtl; with correct text-overflow settings so nothing gets lost in translation.

Extended tips for advanced manoeuvres

Here are extra tips for text-overflow: ellipsis:

Responsive Design: Substitute pixel values for percentage or viewport width (vw) in width for the truncation power to adapt responsively.
Flexbox Containers: If the container is flex, ensure you set min-width: 0; to prevent flex items from becoming over-ambitious.
Variable Content: Sometimes JS (JavaScript Sidekick) stepped in for dynamic truncation when CSS alone can't handle the spotlight.