Truncating Text in CSS

Summary

Learn how to truncate text in CSS, displaying an ellipsis when text overflows its container. This video covers two main techniques: one for single-line truncation and another for multi-line truncation, along with examples from real-world websites like Reddit.

Highlights

Introduction to Truncating Text00:00:00

The video introduces the common problem of text overflowing a container and the need to visually indicate truncation without letting the text bleed out. An example from Reddit's subreddit cards is used to illustrate how descriptions are truncated with an ellipsis on one or two lines.

Single-Line Truncation Technique00:01:21

The simplest method for single-line truncation involves using three CSS properties: 'white-space: nowrap;' to keep text on one line, 'overflow: hidden;' to clip overflowing content, and 'text-overflow: ellipsis;' to display the ellipsis. This technique, however, does not work for multi-line truncation.

Multi-Line Truncation Technique (WebKit Specific)00:03:07

For multi-line truncation, the video demonstrates using WebKit-specific properties: '-webkit-line-clamp' to specify the number of lines, '-webkit-box-orient: vertical;', and 'display: -webkit-box;'. Combined with 'overflow: hidden;', this allows for text to be truncated with an ellipsis after a specified number of lines. While effective with most browsers, Firefox might not fully support this method.

Alternatives to CSS Truncation00:04:53

Another way to handle text truncation, though less common for client-side display, is to truncate the text on the server before it's sent to the client. However, using CSS for truncation is generally preferred due to its simplicity and client-side execution.