여러 줄 텍스트 자르기

소개

이 랩에서는 컨테이너의 치수를 초과하는 여러 줄의 텍스트를 잘라내는 방법을 배웁니다. 이 기술은 더 긴 텍스트의 발췌문을 깨끗하고 정리된 디자인으로 유지하면서 표시하는 데 유용합니다. overflow, height, background와 같은 CSS 속성을 사용하여 사용자 경험을 향상시키는 시각적으로 보기 좋은 텍스트 잘림 효과를 만들 수 있습니다.

여러 줄 텍스트 자르기

index.html 및 style.css는 이미 VM 에 제공되었습니다.

한 줄보다 긴 텍스트를 자르려면 다음 단계를 따르세요.

1. overflow: hidden을 사용하여 텍스트가 치수를 초과하지 않도록 합니다.
2. 요소가 최소한 하나의 고정된 치수를 갖도록 width를 400px로 설정합니다.
3. font-size, line-height, numberOfLines를 사용하여 계산된 height: 109.2px를 설정합니다 (이 경우 26 * 1.4 * 3 = 109.2).
4. HTML 에서 p 요소에 클래스 truncate-text-multiline을 추가합니다.
5. .truncate-text-multiline 클래스에 대한 CSS 에서 font-size: 26px 및 line-height: 1.4를 설정합니다.
6. 텍스트 스타일을 지정하기 위해 color: #333 및 background: #f5f6f9를 설정합니다.
7. transparent에서 background-color로 그라데이션을 만들려면 .truncate-text-multiline::after 가상 요소에 다음 CSS 규칙을 추가합니다.

.truncate-text-multiline::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 150px;
  height: 36.4px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), #f5f6f9 50%);
}

이렇게 하면 font-size * line-height (이 경우 26 * 1.4 = 36.4) 공식을 기반으로 그라데이션 컨테이너에 대해 계산된 36.4px 높이의 그라데이션 컨테이너가 생성됩니다. ::after 가상 요소는 .truncate-text-multiline 요소의 오른쪽 하단 모서리에 배치됩니다.

웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 여러 줄 텍스트 자르기 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.