줄임표를 사용하여 텍스트를 자르고 '123 T'를 추가하려면 어떻게 해야 합니까? 다음 줄에?

점 뒤의 텍스트를 텍스트 오버플로 줄임표의 두 번째 줄에 맞춰 배치하세요

문제

지나치게 긴 텍스트를 압축하기 위해 오버플로를 표시하면서 텍스트의 일부를 숨기려고 합니다. '...123T.' 아래 이미지에서 볼 수 있듯이 다음 줄에:

[줄임표와 "123 T."로 잘린 텍스트 이미지]

해결책

가까운 미래에 "line-clamp: 2 "...123 T.;"가 포함된 코드 한 줄이 자세한 내용은 사양에서 확인할 수 있습니다.

면책조항

이 기능이 널리 사용되기 전에 원하는 결과를 얻을 수 있는 대략적인 해결 방법이 있습니다. 결과:

CSS

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

.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="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>

위 내용은 줄임표를 사용하여 텍스트를 자르고 '123 T'를 추가하려면 어떻게 해야 합니까? 다음 줄에?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!