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

html

responsive-design

css

javascript

byAlex Kataev·Nov 10, 2024

To make text in a <span> element magically transform into "..." when it spills over the allowed width, invoke the magical spell - text-overflow: ellipsis;. This spell will take care of the clumsy part (overflow: hidden;) that tries to break out, and by saying the incantation white-space: nowrap;, the text will not dare to split onto the next line.

CSS:

/* Magician's Dress */
.span-ellipsis {
  display: inline-block; /* Our magical armor, so the width holds */
  width: 150px; /* Our magical boundary */
  overflow: hidden; /* The magic seal */
  white-space: nowrap; /* Our magical command - 'Stay in Line!' */
  text-overflow: ellipsis; /* Abracadabra! Overflow, become "..." */
}

HTML:

<span class="span-ellipsis">This content is too long to fit and will be enchanted to become dotted...</span>

Output: This content is too...

Playing nice with dynamic text

We love surprises, don't we? But our magic prefers predictability over changes. Hence, the width in .span-ellipsis needs to be set considering the longest string or parent container's width.

Breaking the single line curse

The basic spell only works for a single line. Want to enchant multiple lines? Fret not. Just conjure the line-clamp spell, but be careful, older browsers might not like it. If your audience is a group of old school muggles, you'll have to resort to other magical artifacts.

Taming the content with JavaScript

When CSS magic fails, JavaScript comes to the rescue. With a touch of add3Dots function, we can custom tailor our content and append the ellipsis manually.

// Meet Dumbledore's lesser known spell - add3Dots
function add3Dots(string, limit) {
  let dots = "...";
  if(string.length > limit) {
    return string.substr(0, limit - dots.length) + dots; // Planting '...' at the right place
  }
  return string;
}

// Spellcasting 🧙‍♂️
document.querySelector('.span-ellipsis').textContent = 
  add3Dots(document.querySelector('.span-ellipsis').textContent, 150);

JavaScript spells provide a sea of possibilities. Dive in if you dare!

Sweeter spells with jQuery

Are you a budding wizard who wants to manage overflowing text but shorten the spell-cast time? The magical artifact called jQuery Ellipsis plugin can do the hard work for you. Just remember, with great power comes great responsibility, the plugin should be used wisely and sparingly.

Example:

// This spell only requires a wave of your magic wand 🪄
$("#spot span").ellipsis({
  responsive: true // The spell self-adjusts on window resize. Clever isn't it?
});

Expert wizard tips

Responsive design: Make your spell responsive. Use vw for width instead of fixed units like px.
Accessibility: For visually impaired audience who rely on screen readers, use aria-label to deliver the full content.
Hover effects: Consider using a title attribute or a hover tooltip to reveal the full content magically on mouse hover.