Max Lines

Limits a text element to a number of lines. line-clamp and -webkit-line-clamp are other names for this same property, so a stylesheet written for a browser — or Tailwind’s line-clamp-* utilities — applies as it is.

:root {
  padding: 18px;
  background-color: #eef1f4;
}

.row {
  flex-direction: row;
  gap: 6px;
  margin-bottom: 12px;
}

button {
  padding: 4px 10px;
  background-color: #d8dde3;
  border-radius: 4px;
}

button.on {
  background-color: coral;
  color: white;
}

.clamped {
  width: 250px;
  background-color: white;
  padding: 8px;
}

Values

• A whole number of lines. The default is no limit.

Notes

• The lines past the limit are not drawn, and they are not measured either: a clamped element is as tall as the lines it kept, so the ones below it move up. This is what makes the property useful for a card or a list row of fixed height.
• Nothing is appended where the text was cut. text-overflow is the separate property for that — text-overflow: ellipsis puts a … where the text runs past the element’s bounds.
• The property is inherited, so it can be set on a container rather than on each <text>.
• It interpolates, so a transition on it steps through whole line counts rather than fading — each step is a re-measure, so animating it is not free.