Handling long titles with truncation

Examples of how you can use CSS or JavaScript to make working with long strings of text that bit easier.

By Luke Whitehouse on

CSSJavaScript

Snippet

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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrowfunctions) 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrowfunctions) 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 ✂

Follow us on Twitter, Facebook or Github.
© Copyright 2019 Assortment.
Created and maintained by Luke Whitehouse.