CSS Text-Overflow Guide & Examples

Introduction

The text-overflow property in CSS is a handy tool for web developers and designers to manage how text overflow is displayed within a container. It works together with other CSS properties, like white-space and overflow, to control the appearance of text that exceeds the container’s boundaries. This property helps ensure that text remains readable and well-presented, which is crucial for a positive user experience, especially on responsive websites.

Specification

The text-overflow property is defined in the CSS Overflow Module Level 3 specification. This module outlines how overflowing content should be managed and displayed. For detailed specifications, you can refer to the official documentation [here]WebsiteUrl.

Description

The text-overflow property in CSS helps you control how overflowing text is visually indicated to users. It’s useful for fixed-width containers to ensure text doesn’t overflow in an unsightly manner. This property works with other CSS properties, such as overflow and white-space, to manage the appearance of overflowing text.

Usage with Other CSS Properties

To use text-overflow effectively, it’s important to understand how it interacts with other CSS properties.

overflow Property

The overflow property determines what happens to content that overflows its container. For text-overflow to work, you need to set overflow to hidden or scroll.

• overflow: hidden: Hides any overflowing content.
• overflow: scroll: Allows scrolling to access overflowing content.

white-space Property

The white-space property controls how whitespace inside an element is handled. For text-overflow to work, you need to set white-space to nowrap.

• white-space: nowrap: Prevents text from wrapping to the next line.

Example

<div class="overflow-example">
  This content is too wide for the container and a large portion is not visible.
</div>

.overflow-example {
  width: 200px;
  border: 1px solid;
  padding: 2px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

In this example:

• The width property sets a fixed width for the container.
• The white-space: nowrap property prevents the text from wrapping.
• The overflow: hidden property hides any overflowing content.
• The text-overflow: ellipsis property displays an ellipsis ('…') to indicate more text is available.

Syntax

The text-overflow property can accept one or two values.

Single Value Syntax

text-overflow: clip | ellipsis | <string> | initial | inherit;

Two Value Syntax

text-overflow: clip ellipsis;
text-overflow: ellipsis " [..]";

Values

• clip: The default value. Truncates the text at the limit of the content area.
• ellipsis: Displays an ellipsis ('…') to represent clipped text.
• <string>: A custom string to represent clipped text.
• initial: Sets the property to its default value.
• inherit: Inherits the property value from the parent element.
• revert: Reverts the property to the browser’s default value.
• revert-layer: Reverts the property to the value defined for the parent layer.
• unset: Resets the property to its natural value.

Examples

One-Value Syntax

<div class="overflow-clip">
  This content is too wide for the container and a large portion is not visible.
</div>
<div class="overflow-ellipsis">
  This content is too wide for the container and a large portion is not visible.
</div>
<div class="overflow-string">
  This content is too wide for the container and a large portion is not visible.
</div>

.overflow-clip {
  width: 200px;
  border: 1px solid;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.overflow-ellipsis {
  width: 200px;
  border: 1px solid;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overflow-string {
  width: 200px;
  border: 1px solid;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: " [..]";
}

Two-Value Syntax

<div class="overflow-two-values">
  This content is too wide for the container and a large portion is not visible.
</div>

.overflow-two-values {
  width: 200px;
  border: 1px solid;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis " [..]";
}

Example Output

Left to Right Text

• clip:

  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>

  Output: Text cut off at the edge.

• ellipsis:

  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>

  Output: Text ends with '…'.

• " [..]":

  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>

  Output: Text ends with " [..]".

Right to Left Text

• clip:

  <p class="overflow-clip">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>

  Output: Text cut off at the edge.

• ellipsis:

  <p class="overflow-ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>

  Output: Text ends with '…'.

• " [..]":

  <p class="overflow-string">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </p>

  Output: Text ends with " [..]".

Two-Value Syntax

Example Output

clip clip

<pre>clip clip</pre>
<p class="overflow-clip-clip">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>

Output: Text cut off at both ends.

clip ellipsis

<pre>clip ellipsis</pre>
<p class="overflow-clip-ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>

Output: Text cut off at the start and ends with '…'.

ellipsis ellipsis

<pre>ellipsis ellipsis</pre>
<p class="overflow-ellipsis-ellipsis">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>

Output: Text ends with '…' at both ends.

ellipsis ” [..]”

<pre>ellipsis " [..]"</pre>
<p class="overflow-ellipsis-string">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>

Output: Text ends with '…' at the start and " [..]" at the end.

Browser Compatibility

The text-overflow property is well-supported across major browsers. Here’s a summary:

• Chrome: Version 4.0 (January 2010)
• Firefox: Version 7.0 (September 2011)
• Internet Explorer / Edge: Version 6.0 (August 2001)
• Opera: Version 11.0 (December 2010)
• Safari: Version 3.1 (March 2008)

Browser Compatibility Table

Notes on Compatibility

• The text-overflow property is widely supported without needing vendor prefixes.
• Some advanced features, like custom strings, may have limited support. Testing is recommended for complex use cases.

Conclusion

The text-overflow property is a powerful tool for managing overflowing text in web design. Its wide browser support makes it reliable for web developers aiming to create clean and readable layouts. By understanding its compatibility, you can optimize your web projects for various browsers and environments, providing a seamless experience for all users.

See Also

For further reading and related topics, you may find the following resources helpful:

• CSS overflow Property: Learn more about how the overflow property works and how it interacts with other CSS properties to manage overflowing content.
  • MDN Web Docs: overflow
• CSS white-space Property: Understand how the white-space property controls the handling of whitespace inside an element and its importance in managing text overflow.
  • MDN Web Docs: white-space
• CSS overflow-wrap Property: Explore how the overflow-wrap property controls line breaks within words, helping to manage text overflow in a more granular way.
  • MDN Web Docs: overflow-wrap
• CSS word-break Property: Learn about the word-break property, which controls how words should break within an element, providing additional tools for managing text overflow.
  • MDN Web Docs: word-break
• CSS Text Decoration Module Level 3: Dive deeper into the specification that defines how text decorations and overflow should be handled in CSS.
  • CSS Text Decoration Module Level 3
• HTML Reference Guide: A comprehensive guide to HTML elements and attributes, which can be helpful for understanding the context in which CSS properties like text-overflow are applied.
  • MDN Web Docs: HTML Reference

These resources provide a more comprehensive understanding of related CSS properties and how they can be used in conjunction with text-overflow to create well-designed and user-friendly web interfaces.

FAQs

What is the text-overflow property in CSS?

The text-overflow property in CSS controls how overflowed content that is not displayed is signaled to the user. It is commonly used to add an ellipsis (…) or a custom string to indicate that the content has overflowed.

How do I add an ellipsis to overflowed text?

To add an ellipsis to overflowed text, use:

text-overflow: ellipsis;

This will display an ellipsis ('…') at the end of the content that overflows the element’s box.

What are the possible values for text-overflow?

The possible values for text-overflow are clip and ellipsis. The clip value cuts the text without any indication, while the ellipsis value adds a visual cue like “…” to show content overflow.

Does text-overflow work with multiline text?

No, the text-overflow property only works with single-line text. For multiline text, other methods, like CSS or JavaScript, are needed to handle overflow.

Can I customize the overflow indicator with text-overflow?

No, the text-overflow property only supports clip and ellipsis as values. Custom overflow indicators require additional techniques, such as pseudo-elements or JavaScript.

What other CSS properties are commonly used with text-overflow?

The text-overflow property is commonly used with the overflow and white-space properties. The overflow property should be set to hidden or scroll, and the white-space property should be set to nowrap to make text-overflow work correctly.

How do I ensure browser compatibility with text-overflow?

The text-overflow property is widely supported across major browsers, including Chrome, Firefox, Microsoft Edge, IE, Opera, and Safari. However, some advanced features like custom strings may have limited support, so it’s important to test compatibility across different browsers.

Can I animate the text-overflow property?

The text-overflow property is discrete, meaning it does not support smooth transitions between values. Therefore, it is not typically animated.

What is the default value for text-overflow?

The default value for text-overflow is clip. This value truncates the text at the limit of the content area, potentially in the middle of a character.

How can I reset the text-overflow property to its default value?

To reset the text-overflow property to its default value, you can use:

text-overflow: initial;

This sets the property to its initial value, which is clip.

Can I inherit the text-overflow property from a parent element?

Yes, you can inherit the text-overflow property from a parent element using:

text-overflow: inherit;

This makes the child element adopt the same text-overflow behavior as its parent.

By understanding these FAQs, you can effectively use the text-overflow property to manage overflowing text in your web projects, ensuring a clean and user-friendly layout.