Truncating Long Text with an Ellipsis Using text-overflow

In this lesson you'll learn how to truncate a long string with text-overflow, so you can understand how to fit text into a frame without breaking the layout. This is for people searching "CSS text-overflow ellipsis."

Specifying white-space: nowrap, overflow: hidden, and text-overflow: ellipsis together lets you truncate a long string that doesn't fit in its frame with "…," keeping it on a single line. This is a technique commonly used for things like a card list's titles.

The sample code specifies all three properties on .title, confirming how a long title that doesn't fit in a 150px-wide frame gets truncated with "…". If even one of the three is missing, the truncation won't work correctly.

A common beginner stumbling block is specifying only one of these three properties and then being confused when truncation doesn't happen as expected. It helps to understand the three-part division of labor: white-space: nowrap prevents line-wrapping, overflow: hidden hides the overflowing part, and text-overflow: ellipsis displays the "…".

On a listing page with product names or article titles of varying lengths, this lets you keep a tidy appearance while preventing the layout from breaking. It's worth remembering these three properties as a set, since they can be applied immediately in a wide range of situations.