CSS text-overflow Property

CSS text-overflow property is used in situations when the text inside an element is too long and we want only a small part of it to show the user and the remaining part we want to replace with a string such as ‘…’, ‘…more’, ‘…read more’, etc.

The text-overflow property only works with the following two properties:

  • overflow: hidden;
  • white-space: nowrap;

Example:

.p1{
  text-overflow: clip;
  overflow: hidden;
  white-space: nowrap;
}
.p2{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.p3{
  text-overflow: '...Read More';
  overflow: hidden;
  white-space: nowrap;
}

CSS Syntax

The text-overflow property has the following syntax:

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


Property Values

The text-overflow property accepts the following values:

clipThe overflowed text is clipped. This is the default value.
ellipsisThe overflowed text is replaced with the (“…”) string.
custom_stringThe overflowed text is replaced with the specified custom string such as ‘…more’, ‘…read more’, etc.
initialSets the text-overflow property to its default value(clip).
inheritInherits the text-overflow property from the parent element.

General Info

Default Valueclip
InheritedNo
JavaScript Usageelement.style.textOverflow = “ellipsis”

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.