How to Hide Text After Two Lines and Display an Overflow Indicator like '...123 T.'?

Hiding Text after Dots with a Second Line Overflow Indicator

When displaying text with limited space, it's often necessary to truncate and indicate overflow. This question tackles the challenge of hiding text that exceeds two lines and adding "...123 T." to the second line as an indicator.

Current Implementation

The code provided initially tackles this issue:

<div class="container">
  <span class="main-text">
    Long text that exceeds two lines.
  </span>
  <span class="small-text">123 T.</span>
</div>

.main-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

While this method hides the excess text within two lines, it's not cross-browser compatible and may not fully meet the desired outcome.

Future Solution

The specification proposes a shorthand property, line-clamp, which can simplify this task in one line:

line-clamp: 2 "...123 T.";

This property allows for the creation of visually truncated text with overflow indicators.

Hacky Alternative

Until the line-clamp property becomes widely supported, a workaround can be achieved using a CSS hack:

.main-text {
  line-height: 1.2em;
  max-height: calc(2 * 1.2em);
  overflow: hidden;
  position: relative;
}

<div class="main-text">
  Lorem ipsum ...<span>123 T.</span>
</div>

In this approach, a span element with the hidden dots and "123 T." text is positioned at the bottom right of the container. A large box-shadow is used to hide the dots from view, displaying only the ellipsis.

The above is the detailed content of How to Hide Text After Two Lines and Display an Overflow Indicator like '...123 T.'?. For more information, please follow other related articles on the PHP Chinese website!