When text overflows, it appears as an ellipsis

When the element is set to a fixed width, if the text inside the element is outside the width, set it to the ellipsis effect:

The Text-overflow property specifies what happens when the text overflows the containing element.

Grammar

text-overflow:clip|ellipsis| string;

value	Description
Clip	Trims the text.
Ellipsis	Displays the ellipsis to represent the trimmed text.
String	Uses the given string to represent the trimmed text.

The White-space property sets how to handle whitespace within an element.

Possible values

value	Description
Normal	Default. The blank will be ignored by the browser.
Pre	The blank will be reserved by the browser. It behaves like a <pre> tag in HTML.
NoWrap	The text does not wrap, and the text continues on the same line until the <br> tag is encountered.
Pre-wrap	Preserves the sequence of whitespace characters, but wraps them normally.
Pre-line	Merges a sequence of whitespace characters, but preserves newline characters.
Inherit	Specifies that the value of the White-space property should be inherited from the parent element.

Make sure that the element you set has a fixed width:

. calss{      text-overflow:ellipsis;      White-space:nowrap;      Overflow:hidden;        }

The effect is as follows:

When text overflows, it appears as an ellipsis