text-overflow

Overview

The text-overflow property is used to specify how text should be displayed when it overflows its container. This property only takes effect when the overflow property is set to hidden, scroll, or auto and the white-space property is set to nowrap. Primarily, it revolves around two values: clip and ellipsis.

Examples and Usage

We'll illustrate the two main values of the text-overflow property, and include a hover effect to show the full text on mouse hover for demonstration purposes.

HTML Structure

<h1>
  text-overflow: clip;
</h1>

<div class="clip-example">
  The Web's original (created in 1995!) and one of the most respected web development resources.
</div>

<h1>
  text-overflow: ellipsis;
</h1>

<div class="ellipsis-example">
  The Web's original (created in 1995!) and one of the most respected web development resources.
</div>

CSS Styling

/* General styling */
div {
  white-space: nowrap; /* Prevent text wrapping */
  height: 30px;
  width: 250px;
  overflow: hidden; /* Hide overflow */
  border: 1px solid black;
  font-size: 25px;
  font-family: 'UI Monospace', monospace;
}

/* Specific styles for clip example */
.clip-example {
  text-overflow: clip; /* Cuts off overflowing text */
}

/* Specific styles for ellipsis example */
.ellipsis-example {
  text-overflow: ellipsis; /* Replace clipped text with an ellipsis */
}

/* Styling for headings */
h1 {
  color: #CD3333;
}

/* Hover effect to reveal hidden text */
div:hover {
  overflow: visible; /* Reveal hidden text on hover */
}

In the example provided, we showcased the values of text-overflow using two distinct text containers. The .clip-example container applies the clip value, which results in the overflowing text being cut off, while the .ellipsis-example container uses the ellipsis value, replacing the clipped text with an ellipsis character ( … ). Both containers have a fixed width and hidden overflow. The white-space property is set to nowrap to prevent text wrapping.

Values

The text-overflow property can accept the following values:

Experimental values such as <string>, fade, and the fade( <length> | <percentage> ) function have been proposed, but their support is very limited. For instance, the <string> value allows you to specify a custom string to represent the clipped text, but it's only supported in newer versions of Firefox.

Associated Properties

• overflow
• overflow-wrap
• white-space
• word-break
• word-wrap

Tips and Tricks

• Keep in mind that the text-overflow property only works on block or inline-block elements with a single line of text. It doesn't apply to multiline or wrapped text.

• To ensure that text-overflow functions as expected, the element's overflow property should be set to hidden, scroll, or auto, and the white-space property should be set to nowrap.

• text-overflow property doesn't affect the actual layout of the element or its content; it only visually alters the display of the overflowing text.

• If you want to apply text-overflow to inline elements, you can do so by setting the element's display property to inline-block. This allows the property to function correctly, as it requires a defined width to determine when to apply the overflow effect.

Browser Compatibility

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers. (see more specifics in the Useful Resources below)

Useful Resources

Can I use: text-overflow

W3C CSS Text Module Level 3: text-overflow