How can I hide text overflow after the second line with an ellipsis and a custom counter ('...123 T.')?-CSS Tutorial-php.cn

How can I hide text overflow after the second line with an ellipsis and a custom counter ('...123 T.')?

Mary-Kate Olsen

Release： 2024-11-30 05:02:14

Original

405 people have browsed it

How can I hide text overflow after the second line with an ellipsis and a custom counter (

Hiding Text Overflow after Second Line with Ellipsis and Counter

Problem:

Hiding part of a text that exceeds two lines and adding "...123 T." as a hidden overflow indicator requires a clever solution.

Solution:

While future updates will provide a simpler approach using the line-clamp property, here's a creative hack to achieve this effect:

CSS:

.container {
  max-width: 200px;
  margin: 5px;
}

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

.main-text:after {
  content: "123 T.";
  display: inline-block;
  width: 40px;
  position: relative;
  z-index: 999;
  /* big box shadow to hide the ellipsis */
  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; /* cover text beneath */
  margin-left: 2px;
}

.main-text span {
  position: absolute;
  /* bottom right position */
  top: 1.2em; /* 1 line height */
  right: 0;
  padding: 0 3px;
  background: #fff; /* cover text beneath */
}

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

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

Copy after login

HTML:

<div class="container">
  <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>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lo <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit. Nam metus <span></span>
  </div>
</div>

<div class="container">
  <div class="main-text">
    Lorem ipsum dolor sit ameta, adipiscing elit <span></span>
  </div>
</div>

Copy after login

This technique ensures that the "...123 T." indicator appears after the text has been truncated at the second line.

The above is the detailed content of How can I hide text overflow after the second line with an ellipsis and a custom counter ('...123 T.')?. For more information, please follow other related articles on the PHP Chinese website!