Truncating Text with Text-Overflow

When building websites we often find ourselves in situations where text within an html element goes beyond the available space. To keep things looking nice and readable we can use the css text-overflow property. This property allows us to control the text that overflows a given area.

How text-overflow works?

The text-overflow property works in combination with:

• white-space: nowrap; – prevents text from wrapping to a new line
• overflow: hidden; – hides the content that overflows the container

Text-overflow values

1. clip – the default value, which just cuts off the text with no indicator
2. ellipsis – replaces the cut off text with an ellipsis (…)
3. string – allows to use a custom string as an indicator (supported in some browsers)

Practical Examples

1. Simple Ellipsis

Imagine a text block that might have a long heading:

<div class="sf-text-overflow">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
</div>

/* ------------------------- */
/*  Snippflow Text Overflow  */
/* ------------------------- */

.sf-text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 360px;
}

Effect: Text that goes beyond 360px width is truncated and replaced with an ellipsis.

Example:

See the Pen Truncating Text with Text-Overflow by Snippflow (@snippflow) on CodePen.

2. Custom Symbol

Custom symbol (in browsers that support experimental features):

/* -------------------------------- */
/*  Snippflow Custom Text Overflow  */
/* -------------------------------- */

.sf-custom-text-overflow {
  width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: "[...]";
}