A text-overflow property in CSS is used to specify that some text has overflown and hidden from view. The white-space property must be set to nowrap and the overflow property must be set to hidden. The overflowing content can be clipped, display an ellipsis (‘…’), or display a custom string.

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

Property Values: All the properties are described well with the example below.

clip: Text is clipped and cannot be seen. This is the default value.

ellipsis: Text is clipped and the clipped text is represented as ‘…’.

string: The clipped text is represented to the user using a string of the coder’s choice. This option is only visible in the Firefox browser.

initial: It is used to set an element’s CSS property to its default value ie., this value will set the text-overflow property to its default value.

inherit: It is used to inherit a property to an element from its parent element property value ie., the value will set the text-overflow property to the value of the parent element.