두 줄 뒤의 텍스트를 숨기고 '...123 T.'와 같은 오버플로 표시기를 표시하는 방법은 무엇입니까?

두 번째 줄 오버플로 표시기를 사용하여 점 뒤의 텍스트 숨기기

제한된 공간에 텍스트를 표시할 때 잘라내어 오버플로를 표시해야 하는 경우가 많습니다. 이 질문은 두 줄을 초과하는 텍스트를 숨기고 "...123 T"를 추가하는 문제를 해결합니다. 두 번째 줄에 표시됩니다.

현재 구현

처음에 제공된 코드는 이 문제를 해결합니다.

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

이 문제는 메서드는 초과 텍스트를 두 줄 안에 숨깁니다. 이는 브라우저 간 호환되지 않으며 원하는 내용을 완전히 충족하지 못할 수 있습니다. 결과.

미래 솔루션

사양에서는 이 작업을 한 줄로 단순화할 수 있는 단축 속성인 line-clamp를 제안합니다.

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

이 속성을 사용하면 오버플로가 있는 시각적으로 잘린 텍스트를 만들 수 있습니다. 표시기.

Hacky Alternative

line-clamp 속성이 널리 지원될 때까지 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>

이 접근 방식에서는 숨겨진 점과 "123 T"가 있는 스팬 요소가 있습니다. 텍스트는 컨테이너의 오른쪽 하단에 위치합니다. 큰 상자 그림자는 보기에서 점을 숨기고 줄임표만 표시하는 데 사용됩니다.

위 내용은 두 줄 뒤의 텍스트를 숨기고 '...123 T.'와 같은 오버플로 표시기를 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!