How to Hide Text Overflow with a Custom Indicator in CSS?

Hiding Text Overflow with an Indicator

To condense text that exceeds two lines and indicate the hidden content, a custom solution can be implemented until the future implementation of the line-clamp property.

Custom Solution

1. Set the line height and maximum height of the text container to limit its display to two lines.
2. Use the overflow: hidden property to conceal the overflowing text.
3. Create a shadow effect to obscure the text that would be revealed by the ellipsis otherwise.
4. Place a span element with the desired indicator text at the bottom right of the container, using absolute positioning.
5. Add the ellipsis to the beginning of the span element and the indicator text to its end.

CSS

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

.main-text:after {
  content: "123 T.";
  display:inline-block;
  width:40px;
  position:relative;
  z-index:999;
  box-shadow:
    40px 0 0 #fff,
    80px 0 0 #fff,
    120px 0 0 #fff,
    160px 0 0 #fff;
  color: #8e8f8f;
  font-size: 10px;
  background: #fff;
  margin-left:2px;
}

.main-text span {
  position: absolute;
  top: 1.2em;
  right: 0;
  padding: 0 3px;
  background: #fff;
}

.main-text span:before {
  content: "...";
}

.main-text span:after {
  content: "123 T.";
  color: #8e8f8f;
  font-size: 10px;
}

HTML

<div class="main-text">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam metus mi, dapibus sit amet posuere eu, porttitor condimentum nulla. Donec convallis lorem justo, eget malesuada lorem tempor vitae. Aliquam sollicitudin lacus ipsum, at tincidunt ante condimentum
  vitae. <span></span>
</div>

This solution hides overflow text and shows the specified indicator after two lines.

The above is the detailed content of How to Hide Text Overflow with a Custom Indicator in CSS?. For more information, please follow other related articles on the PHP Chinese website!