Text Overflow

The text-overflow property specifies how text should behave when it overflows its containing element's box.

This property is particularly useful when dealing with text that is too long to fit within its container.

ellipsis:

The overflow text is truncated and an ellipsis (...) is displayed to indicate that the text has been cut off.

Example:

.box {
  width: 230px;
  white-space: nowrap; /* Prevents text from wrapping */
  overflow: hidden; /* Hides overflow text */
  text-overflow: ellipsis; /* Truncates overflow text with ellipsis */
}

string:

Example:

.box {
  width: 230px;
  white-space: nowrap; /* Prevents text from wrapping */
  overflow: hidden; /* Hides overflow text */
  text-overflow: '...more'; /* Custom string to indicate more content */
}

Allows us to specify a custom string to be displayed when text overflows.

Example:

.box {
  width: 230px;
  white-space: nowrap; /* Prevents text from wrapping */
  overflow: hidden; /* Hides overflow text */
  text-overflow: clip; /* Clips overflow text */
}

clip:

Default value. The overflow text is clipped (hidden).

Note:

Use "ellipsis" to truncate the overflow text and indicate that more content is available.
Use "string" if needs to display a custom string when text overflows.
Use "clip" if needed to simply hide the overflow text without any indication.
"text-overflow" property works best in conjunction with "white-space: nowrap" and "overflow: hidden" to prevent text from wrapping and to hide the overflow text.

<-- Word Break

Text Decoration -->