줄임표와 사용자 정의 카운터('...123 T.')를 사용하여 두 번째 줄 뒤의 텍스트 오버플로를 어떻게 숨길 수 있나요?

줄임표와 카운터를 사용하여 두 번째 줄 이후의 텍스트 오버플로 숨기기

문제:

부분 숨기기 두 줄을 초과하는 텍스트에 "...123 T."를 추가합니다. 숨겨진 오버플로 표시기를 사용하려면 영리한 솔루션이 필요합니다.

해결책:

향후 업데이트에서는 line-clamp 속성을 사용하여 더 간단한 접근 방식을 제공할 예정이지만, 여기에 창의적인 방법이 있습니다. 이것을 달성하다 효과:

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;
}

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>

이 기술은 ".. .123T." 두 번째 줄에서 텍스트가 잘린 후에 표시가 나타납니다.

위 내용은 줄임표와 사용자 정의 카운터('...123 T.')를 사용하여 두 번째 줄 뒤의 텍스트 오버플로를 어떻게 숨길 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!