Handling long titles with truncation

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.

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:

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:

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:

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:

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:

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 ✂