text-overflow: ellipsis requires three conditions

Setting text-overflow: ellipsis on an element has no effect — the text still wraps or overflows without showing the ellipsis character.

All three of the following properties must be set together on the same element:

/* All three are required for ellipsis to work on single line */
.truncate {
  white-space: nowrap;     /* 1. prevent text wrapping */
  overflow: hidden;        /* 2. hide overflowing text */
  text-overflow: ellipsis; /* 3. show ellipsis for the hidden part */
  max-width: 200px;        /* container must have a constrained width */
}

/* Multi-line ellipsis (line-clamp) */
.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* clamp to 3 lines */
  overflow: hidden;
  /* text-overflow: ellipsis not needed for line-clamp */
}

/* Modern single-property approach */
.clamp-modern {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2; /* standard property, limited support */
  -webkit-box-orient: vertical;
}

text-overflow only applies when text overflows its container. Without white-space: nowrap, text wraps instead of overflowing. Without overflow: hidden, the overflow is visible rather than clipped.

Single-line text truncation in cards, table cells, or any fixed-width container.