🎯 CSS text-overflow Property

The text-overflow property controls how overflowing text is displayed when it does not fit inside its container.

It is commonly used to truncate long text and replace it with an ellipsis (...).

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
                

➡️ This prevents wrapping, hides overflow, and adds “...” when text is too long.

clip example:

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
                

➡️ Output: text is cut off directly without dots.

ellipsis example:

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
                

➡️ Output: Lorem ipsum dolor sit amet...