The text-overflow property cuts off text that’s too long to fit, optionally replacing with ellipsis. In other word this property specifies what happens when text overflows the content. 

The text-overflow property must be used in conjunction with the overflow property, as well as white-space property; more precisely the overflow property must have a value of hidden, scroll or auto, while the white-space property must be set to no-wrap.


selector { 

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



Following values are permitted to be used with text-overflow property:

  • clip; Default value which clips the text.
  • string; Renders the given string to represent clipped text.
  • ellipsis; Renders an ellipsis (“…”) to represent clipped text.
  • initialinherit


The text-overflow property example with string, ellipses and default clip values.


›› go to examples ››