순수한 CSS를 사용한 멀티 라인 잘림

이것은 순수한 CSS를 사용하여 멀티 라인 텍스트 자리 구현에 대한 팁입니다. 이 기사는 line-height 및 의사 요소를 사용하여 텍스트 자리를 구현하고 엘립스 시스 (…)를 표시하는 영리한 방법을 소개합니다.

이 기사는 이제 단일 라인 텍스트 자르기를 다루는 표준화 된 방법이 있지만 멀티 라인 텍스트 자르기는 여전히 까다 롭습니다. 이 기사에서 소개 된 순수한 CSS 방법 (JavaScript 또는 서버 측 작업 없음)은 단순성으로 높이 평가됩니다. Firefox 68 이상은 -webkit-line-clamp 지원하기 시작 하여이 방법의 브라우저 호환성을 향상시킵니다.

그러나이 기사는 텍스트 높이 계산에 line-height 사용하는보다 영리한 CSS 기술에 중점을 둡니다. 요소의 line-height 1.4rem이라고 가정하면 최대 3 줄의 텍스트를 표시하기 위해 max-height 1.4rem * 3 으로 설정하십시오. 사용 편의성을 위해이 기사는 CSS 변수 --lh 정의하여 전역 line-height 설정하는 것이 좋습니다.

 html {
  ---lh : 1.4rem;
  라인 높이 : var (-lh);
}

그런 다음 max-height and overflow: hidden .

 .Truncate-Overflow {
  -선원 : 3;
  Max-Height : calc (var (-lh) * var (-max-lines));
  오버플로 : 숨겨진;
}

텍스트를 잘라낸 후 타원을 표시하려면이 기사는 텍스트 하단의 오른쪽 모서리에 타원을 추가하기 ::before 의사 요소를 사용합니다.

 .Truncate-Overflow :: 이전 {
  콘텐츠: "...";
  위치 : 절대;
  하단 : 0;
  오른쪽 : 0;
}

이 기사는 또한 텍스트 줄의 수가 --max-lines 보다 적을 때 타원을 표시하지 않기 위해, 다른 의사 요소 ::after 타원을 무시하는 데 사용될 수 있다고 지적했다.

 .Truncate-OverFlow :: 이후 {
  콘텐츠: "";
  위치 : 절대;
  오른쪽 : 0;
  너비 : 1REM;
  높이 : 1rem;
  배경 : 흰색;
}

이 기사는 다른 언어와 텍스트 흐름 시나리오의 호환성을 향상시키기 위해 CSS 논리적 특성 (예 : right 대신 inset-inline-end )의 사용을 언급 하고이 방법의 한계를 지적합니다. Ellipsis는 마지막 단어에 가깝지 않습니다. 또한이 기사는이 방법에 대한 잠재적 인 접근성 문제를 언급합니다. 잘린 텍스트에 대화식 요소가 포함 된 경우 이러한 요소에 집중하지만 보이지 않습니다.

위 내용은 순수한 CSS를 사용한 멀티 라인 잘림의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!