-webkit-line-clamp is widely supported; standard line-clamp property is emerging.

Why is my ellipsis missing?

You need a defined width (or max-width), overflow:hidden, and nowrap for single-line.

Clamp vs JavaScript read more?

CSS clamp is great for cards; use JS when you need measure and expand in place.

Classic one-line truncation in narrow columns.

Long title

A very long product title that must not break the card layout

Text ends with … when it overflows.

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

Limit to N lines with ellipsis at the end.

Three lines

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Clamped to three lines.

.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Prevent layout blowout from unbroken strings.

Long URL

https://example.com/very/long/path/that/wraps

overflow-wrap: anywhere breaks long tokens.

.break {
  overflow-wrap: anywhere;
  word-break: break-word;
}

line-clamp standard?: -webkit-line-clamp is widely supported; standard line-clamp property is emerging.
Why is my ellipsis missing?: You need a defined width (or max-width), overflow:hidden, and nowrap for single-line.
Clamp vs JavaScript read more?: CSS clamp is great for cards; use JS when you need measure and expand in place.