CSS text-overflow Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

text-overflow: clip;

text-overflow: ellipsis;

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

HTML

<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>

CSS

p.clip { 
   white-space: nowrap;
   overflow: hidden;
   background: #fc0; 
   padding: 5px;
   text-overflow: ellipsis; 
}

Result

Editor

Browser Support

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

Desktop

12	1	7	11	1.3

Tablets / Mobile

18	7	11	1	1	37

Last updated by CSSPortal on: 2nd January 2024

Support Us