Guidelines

Truncation

Recommendations when cutting it short.

Though truncation should be used infrequently there are situations where the user can benefit from seeing a preview of data. For example, a user may want to skim through the beginning of multiple reviews before deciding to view one in its entirety.

Types

In Thumbtack products there are four types of truncation in use:

  1. Strings that are one line long with no UI action to expand what’s been truncated.
  2. Strings between two and three lines long with no UI action to expand what’s been truncated.
  3. Long blocks of text, like user reviews, that can be expanded with a “Read more” link.
  4. Lists of items that are extended with a “Show more” link.

Patterns & implementations

1. Single-line strings

In our industry, you hear a lot of talk about the future of work. What I’ve come to believe — because I see it every day — is that the entrepreneurial spirit of independent professionals is the most precious resource we have as a society.

Web

In this case a few lines of well-supported CSS is sufficient. The truncate class is available in our Atomic library to make this easy.

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

2. Multiline strings

Multiline truncation example

Web

This type of truncation is a bit more complicated with no one perfect solution. There are a number of Sass and JavaScript approaches but they are buggy or convoluted. In this case we recommend a Sass approach that uses line-height tokens to calculate a max-height.

.multiline {
font-size: $tp-font__title__3__size;
line-height: $tp-font__title__3__line-height;
max-height: $tp-font__title__3__line-height * 2; // Needed by non-Webkit browsers
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
  • Users of Webkit-based browsers will see an ellipsis if the text overflows the number of lines specified in -webkit-line-clamp.
  • Non-WebKit browsers, like Firefox, will see no ellipsis and the text will cut off at the last word that fits. Though this is not ideal the drawbacks of the alternatives outweigh their benefits.

3. “Read more”

Read more example

Because the Sass pattern for multiline truncation describe above relies on a max-height calculation, it can visually break if the size of the text container changes unexpectedly. To insulate against this we recommend the following:

  • Truncate the string using a word count.
  • If the word count threshold is met, append an ellipsis to the string.
  • The “Read more” link should be on its own line below.
  • A “Read less” button to undo the reveal action is not needed.

Note that depending on the width of the container this approach means that the truncation will often not occur at the of a line.

4. “Show more”

Read more example

This is a standard Javascript interaction to show/hide multiple elements in a list. The number of elements to hide and reveal should be at the discretion of the designer and developer, keeping in the mind the following:

  • Include logic to avoid hiding only one element.
  • Consider whether the user should be able to show and re-hide the content.