If you've ever worked on a blog you'll understand the pain of styling up long titles for your articles. Long words plus big font sizes spell unhealthy amounts of whitespace, making designers everywhere cry themselves to sleep.

An example blog excerpt illustrating the frustrations of long titles.
An example blog excerpt illustrating the frustrations of long titles.

Here are some examples of how we can circumvent those typographic-woes, and how to implement them.

Truncation with CSS

If you're looking for a simple clipping of text, then the first example using text-overflow: clip; is for you.

.truncate-with-css {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

Here's an example of that in use:

Long titles can be truncated using CSS text-overflow:clip;
Long titles can be truncated using CSS `text-overflow: clip;`

It's also worth mentioning that the basic API for truncation is readily available in all major browsers, however, some examples below may not be.

Truncation with CSS ellipsis

You can also give your truncated text a little flare with some ellipsis using text-overflow: ellipsis.

.truncate-with-css-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Here's an example of that in use:

Expanding on the clipping technique above with ellipsis via text-overflow:ellipsis;
Expanding on the clipping technique above with ellipsis via `text-overflow: ellipsis;`

JavaScript fallback

The CSS implementations are great and I'd encourage their use for 90% of cases, but there are times where you may need to do this via JavaScript. Maybe you don't want that content available for screenreaders? Who knows, I'm not judging (at least in this post), but here's how you can apply the same ellipsis truncation via JavaScript.

/**
 * Basic truncation example with JS
 */
const basicTruncate = (str, strLgth = 30) => {
  const truncStr = str.substring(0, strLgth);

  return str.length > strLgth ? `${truncStr}...` : str;
};

const example = document.getElementById('truncation-with-js')
const truncText = basicTruncate(example.textContent);
example.textContent = truncText;

Note: The code above uses a couple of ES2015 techniques (arrow functions and default params). If you're looking for the ES5 version, copy and paste the code into this transpiler.

Here's an example of that in use:

You can even truncate your titles with JavaScript if you really have to
If needed, you can always fallback to a JavaScript implementation of ellipsis truncation.

Truncation with CSS custom characters (Firefox only)

Going back to CSS, you can truncate your text with a custom series of characters by passing in a string to text-overflow. Unfortunately, this is only available in Firefox at the moment.

.truncate-with-css-customchar {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: "-!!-";
}

Here's an example of that in use:

Only Firefox has support for text-overflow with custom characters
Only Firefox has support for text-overflow with custom characters

JavaScript fallback

As a fallback, you could use JavaScript to provide the ability to truncate with custom characters to browsers other than Firefox.

/**
 * Truncation with custom characters in the place of the text.
 */
const truncateWithCustomChars = (str, strLgth = 30, custChar = '...') => {
  const truncStr = str.substring(0, strLgth);

  return str.length > strLgth ? `${truncStr}${custChar}` : str;
};

const example2 = document.getElementById('truncate-with-js-customchar')
const truncText2 = truncateWithCustomChars(example2.textContent, 30, '£%!?*');
example2.textContent = truncText2;

Note: Once again, the code above uses a couple of ES2015 techniques (arrow functions and default params). If you're looking for the ES5 version, copy and paste the code into this transpiler.

Here's an example of that in use:

You can create a custom character fallback with JavaScript
You can create a custom character fallback with JavaScript

Any other fancy examples of truncation you'd like to share? I'd be really interested in any related to SVG's and how performant they are. Let me know.

Until next time ✂


# Comments

  1. #1 Posted:

    Matt

    How about title in two rows with elipsis at the end? So far, I used librarues that do that.

    Reply to this comment
    1. #1-1 Posted:

      Luke Whitehouse

      Hey Matt, the JavaScript solutions I demonstrated above should show that, although they do require you to supply a character limit.

    2. #1-2 Posted:

      Luke Whitehouse

      Alternatively, you may want to try this CSS Tricks article on the subject.

  2. #2 Posted:

    Luke Whitehouse

    I forgot to mention in the article, but if you're interested in seeing these examples in action you can go over to my Codepen demo

    Reply to this comment
  3. #3 Posted:

    Konstantin

    Nice write up. Have you find any examples using text truncation with text that spans over several lines? Example using text-overflow: ellipsis, unfortunately, won't work if your element has display: flex on it and it itself a flex-item. I'm desperately trying to find some solution but unfortunately what I've seen so far doesn't seem to work (event solutions from the css-tricks.com).

    Reply to this comment
    1. #3-1 Posted:

      Luke Whitehouse

      Hey Konstantin, it sounds like you're looking for the same thing Matt mentioned above, unfortunately at that point I'd say you're better off using one of the JS fallbacks I mentioned in the article.

    2. #3-2 Posted:

      Luke Whitehouse

      Alternatively, you may want to try this CSS Tricks article on the subject.

  4. #4 Posted:

    Nicola Zambello

    To do this on multiple lines, I ended up creating a library (there were some but didn't work well). Here it is: https://github.com/nzambello/ellipsed

    Reply to this comment
    1. #4-1 Posted:

      Luke Whitehouse

      Thanks for this Nicola, great to see some more examples of truncation.

# Leave a comment

No wookies will get this, its just for your Gravatar image.

Basic markdown supported, go to FAQ for more info.