CSS에서 사용자 정의 표시기를 사용하여 텍스트 오버플로를 숨기는 방법은 무엇입니까?

표시기로 텍스트 오버플로 숨기기

두 줄을 ​​초과하는 텍스트를 압축하고 숨겨진 콘텐츠를 표시하기 위해 맞춤형 솔루션을 구현할 수 있습니다. line-clamp 속성의 향후 구현.

사용자 정의 해결 방법

1. 텍스트 컨테이너의 줄 높이와 최대 높이를 설정하여 표시를 두 줄로 제한합니다.
2. overflow: 숨겨진 속성을 사용하여 넘친 텍스트를 숨깁니다.
3. 그림자 효과를 만들어 줄임표로 인해 드러날 텍스트를 가릴 수 있습니다.
4. 절대 위치 지정을 사용하여 컨테이너 오른쪽 하단에 원하는 표시기 텍스트가 있는 범위 요소를 추가합니다.
5. 스팬 요소의 시작 부분에 줄임표를 추가하고 해당 요소에 표시기 텍스트를 추가합니다. 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>

이 솔루션은 오버플로 텍스트를 숨기고 다음을 표시합니다. 두 줄 뒤에 지정된 표시.

위 내용은 CSS에서 사용자 정의 표시기를 사용하여 텍스트 오버플로를 숨기는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!