Cut long text with “…” in CSS

Fit long text into a fixed-width box with an ellipsis, on one line or on several.

30 August 2013 · 1 min read

From the archive: first published on mohamedsharaf.net in August 2013. Rewritten and checked in 2026; some details may be out of date.

To keep long text on one line inside a fixed width and end it with “…”:

.box {
  width: 300px;
  white-space: nowrap;      /* keep it on one line */
  overflow: hidden;         /* hide what doesn't fit */
  text-overflow: ellipsis;  /* show … at the cut */
}

All three properties are needed together. For text that should wrap to a few lines and then stop, modern browsers support line clamping:

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

The old -o- prefix for Opera from my 2013 version is no longer needed.