Multi-Line Truncation with Pure CSS

This is a tips on implementing multi-line text truncation using pure CSS. The article introduces a clever way to implement text truncation using line-height and pseudo-elements and display ellipsis (…).

The article points out that although there are now standardized ways to deal with single-line text truncation, multi-line text truncation is still tricky. The pure CSS method (no JavaScript or server-side operation) introduced in this article is highly regarded for its simplicity. Firefox 68 and above have begun to support -webkit-line-clamp , which improves the browser compatibility of this method.

However, the article focuses on a more clever CSS technique that uses line-height for text height calculations. Assuming the element's line-height is 1.4rem, to display up to three lines of text, just set max-height to 1.4rem * 3 . For convenience of use, the article recommends defining a CSS variable --lh to set the global line-height :

 html {
  --lh: 1.4rem;
  line-height: var(--lh);
}

Then, use max-height and overflow: hidden to implement text truncation:

 .truncate-overflow {
  --max-lines: 3;
  max-height: calc(var(--lh) * var(--max-lines));
  overflow: hidden;
}

To display ellipses after truncating text, the article uses a pseudo-element ::before to add ellipses to the right corner of the bottom of the text:

 .truncate-overflow::before {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
}

The article also pointed out that to avoid displaying ellipses when the number of lines of text is less than --max-lines , another pseudo-element ::after can be used to override ellipses:

 .truncate-overflow::after {
  content: "";
  position: absolute;
  right: 0;
  width: 1rem;
  height: 1rem;
  background: white;
}

The article ends up mentioning the use of CSS logical properties (such as inset-inline-end instead of right ) to improve compatibility in different languages ​​and text flow scenarios, and points out a limitation of this method: the ellipsis is not close to the last word. In addition, the article also mentions a potential accessibility problem for this method: if the truncated text contains interactive elements, these elements are focused but not visible.

The above is the detailed content of Multi-Line Truncation with Pure CSS. For more information, please follow other related articles on the PHP Chinese website!