CSS — Text Truncation

Text truncation is used when you have long text that doesn’t fit in a container. CSS can automatically cut off the extra text and display three dots (...) at the end, so the layout stays clean and readable. This is commonly used in news feeds, product descriptions, or anywhere space is limited. To use text truncation, combine overflow, white-space, and text-overflow properties together.

.truncate { width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }