Truncate text with Ellipsis

Learn how to make long text look clean with a simple CSS trick. This article shows how to use text-overflow: ellipsis to keep your layout neat and professional.

Sometimes long text looks bad in a layout. It can break your design and make the interface messy. CSS has a simple way to fix that problem. You can use the text-overflow property with the ellipsis value. It makes long text end with three dots instead of overflowing the container.

The Idea

This method works by hiding extra text and replacing it with an ellipsis. It looks clean and modern. You can use it for buttons, cards, or any single-line element that has a limited width.

The CSS

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

Change block type or style

Move Separator block from position 18 up to position 17

Block Separator is at the end of the content and can’t be moved down

Change alignment

Change block type or style

Move Separator block from position 14 up to position 13

Block Separator is at the end of the content and can’t be moved down

Change alignment

These three lines are all you need. The overflow property hides the extra content. The white-space rule keeps the text on one line. And the text-overflow rule adds the dots when the text is too long.

Why It’s Useful

Truncating text makes the layout look stable and professional. It is useful when you work with dynamic text from users or databases. Instead of breaking the layout, the text stays inside its container and still looks good.

Where to Use It

Final Thoughts

This small CSS trick can improve how your interface looks. It takes only one minute to add and works in all modern browsers. Use it whenever your text needs to stay neat and compact.