To show an ellipsis with CSS, use text-overflow: ellipsis along with three conditions: 1. Set a width or max-width on the element. 2. Apply white-space: nowrap or allow block overflow. 3. Use overflow: hidden to clip the text. For multi-line truncation, use -webkit-line-clamp with display: -webkit-box and -webkit-box-orient: vertical while keeping overflow: hidden and text-overflow: ellipsis. Common issues include missing overflow: hidden, no width constraint, or incorrect display type such as inline elements not styled properly.

When text overflows its container and you want to show an ellipsis (…) instead of letting it run off the screen, CSS has a neat built-in solution using text-overflow: ellipsis. It’s simple but comes with some conditions.

What You Need for Ellipsis to Work

Just setting text-overflow: ellipsis isn’t enough on its own. For it to function properly, three basic conditions must be met:

• The element must have a defined width or max-width.
• White space inside the element should be set to nowrap, or the container must allow overflow in a block direction.
• Overflow needs to be hidden so that anything beyond the container isn't visible.

Here's a basic example:

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

Without these three styles working together, the ellipsis won’t show up. This setup works great for single-line truncation.

Truncating Multi-Line Text

The default text-overflow: ellipsis only works for single lines. If you're dealing with multi-line blocks of text — like a description or paragraph — you'll need extra CSS to make the ellipsis appear correctly.

One common way is using -webkit-line-clamp along with a few other properties. Here's how you can do it:

.multi-line-truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* number of lines to show */
  overflow: hidden;
  text-overflow: ellipsis;
}

This method uses WebKit-specific styles, which means it works well in most modern browsers, though older ones might not support it fully. If browser compatibility is a concern, JavaScript-based fallbacks or clamping libraries are options to consider.

When It Doesn’t Work — Common Pitfalls

Sometimes, even when you think everything is set up right, the ellipsis doesn’t show. A few common issues include:

• Missing overflow: hidden: Without this, the text just spills out.
• No width constraint: If the container can grow freely, there’s no overflow to hide.
• Incorrect display type: For multi-line clamping, the element must behave like a box (display: -webkit-box).

Also, inline elements like <span></span> may not respect these rules unless styled appropriately. In those cases, switching to display: inline-block might help.

Wrapping Up

Applying ellipsis with text-overflow is straightforward once you know the required conditions. Whether it's one line or multiple lines, the key is managing overflow and layout behavior properly. It's a small detail, but one that makes a big difference in polished UI design.

That’s about all there is to it — not too tricky, but easy to miss a step if you’re not careful.

The above is the detailed content of Handling text overflow with ellipsis using css text-overflow. For more information, please follow other related articles on the PHP Chinese website!