The text-overflow property specifies rendering when inline content overflows its block container element ("the block") in its inline progression direction that has 'overflow' other than 'visible'.

  • Initial valueclip
  • Applies toBlock containers
  • InheritedNo
  • MediaVisual
  • Computed valueAs specified
  • AnimatableNo
  • CSS VersionCSS3
  • JavaScript
Formal syntax: ( clip | ellipsis | <string> ){1,2} | inherit 

text-overflow: [value];
  • 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.
.class {
   text-overflow: ellipsis;

Last updated on 23rd March 2014 By Rene Spronk

View All CSS Properties

Errors? Please help to keep this list up to date, If you find any errors, please contact us, so that we can get them fixed.