Text Truncation

Writing

Text truncation is the cutting off of text in an interface when the space is too small to display the entire string. In general, we should strive to avoid truncating titles, names, labels, or other text. However, especially in mobile interfaces, there may be times where truncation is unavoidable.

As an app developer or designer, you should treat most cases where you conveniently resort to truncating text as a failure in your design. There are certainly exceptions to this, and especially if you deal with user-generated content you have to set a limit—nobody wants item titles spanning a dozen lines or more. For 'normal' content, however, the default should be to display the full text. If that means an item title requires four lines, then give me four lines.
Ole Begemann

Truncate

Line Clamp

Here's an example of a block of text being clamped to two lines using pure CSS.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa metus, tempus sit amet rhoncus nec, suscipit et ligula. Donec in sem libero, quis dapibus nisi. Nunc bibendum ultrices tellus sed molestie. Donec venenatis, quam non fringilla congue, nisl nisl eleifend nibh, et pellentesque lorem turpis et erat. Nulla ac nisi odio, in rhoncus urna. Duis congue urna lorem, et auctor tellus. Phasellus eleifend varius rhoncus. In hac habitasse platea dictumst. Quisque nec tincidunt neque. Proin vitae tortor justo. Ut sem turpis, viverra eget tristique sed, accumsan in justo. Eu velit officia ex enim ipsum magna. Consectetur irure culpa ullamco ipsum aute non non sit sunt aliqua. Est Lorem adipisicing esse nisi officia sunt consequat deserunt qui. Velit ea do labore velit irure nulla Lorem proident incididunt ex.

Some guidelines to follow if you absolutely cannot avoid truncation:

If at all possible, provide the ability for text to wrap to at least two lines before truncating.
Always use an ellipsis (…) with no spaces before or after it to indicate where text is truncated.
If the truncated text is a link, use the tooltip component on hover to display the complete text string. Also, make sure that the complete text string appears prominently on the linked page, because the tooltip on hover will not be available to users on touch devices.
If the truncated text is not a link, clicking or tapping the text should display the tooltip component with the complete text string.
Don't truncate after gerunds (e.g. Searching… Buffering…, etc.) so users won't confuse truncated text with "task in progress" indicators.
Consider whether truncating in the middle of the item or the end of the item would provide more useful information to the user. (If you don't know which approach will provide more useful information that's an indication that the component or content isn't well defined enough to deliver a successful design. Get the information about the component and content you need in order to answer this question before creating a compromised design.)