CSS text-overflow Property

Description

The text-overflow CSS property is used to control how text content should behave when it overflows its containing element's boundaries, typically due to limited space. It is often used in conjunction with the white-space and overflow properties. The text-overflow property allows you to specify whether to display an ellipsis (...) to indicate that more text is hidden, truncate the text, or simply clip it when it overflows. This property is particularly useful for creating clean and user-friendly interfaces, ensuring that long text doesn't disrupt the layout while providing a visual cue that there is more content available.

Initial value
clip
Applies to
Block containers
Inherited
No
Computed value
As specified
Animatable
No
JavaScript syntax
object.style.textOverflow

Interactive Demo

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass.

Syntax

text-overflow: ( clip | ellipsis | <string> ){1,2} | inherit 

Values

  • clipClip inline content that overflows. Characters may be only partially rendered.
  • ellipsisRender an ellipsis character (U+2026) to represent clipped inline content. Implementations may substitute a more language/script-appropriate ellipsis character, or three dots "..." if the ellipsis character is unavailable.
  • <string>Render the given string to represent clipped inline content. The given string is treated as an independent paragraph for bidi purposes.

Example

<p class="clip">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
p.clip { 
   white-space: nowrap;
   overflow: hidden;
   background: #fc0; 
   padding: 5px;
   text-overflow: ellipsis; 
}

Browser Support

The following table will show you the current browser support for the CSS text-overflow property.

Desktop
Edge Chrome Firefox Opera Safari
1217111.3
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
187111137

Last updated by CSSPortal on: 2nd January 2024