CSS text-overflow Property


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
Applies to
Block containers
Computed value
As specified
JavaScript syntax


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


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


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

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 29th September 2023