여러 줄 텍스트 자르기: CSS 로 가독성 향상

소개

이 랩에서는 CSS 를 사용하여 여러 줄의 텍스트를 지정된 줄 수로 자르는 방법을 살펴봅니다. -webkit-line-clamp 속성 및 기타 관련 CSS 속성을 사용하면 텍스트 블록에 표시되는 줄 수를 효과적으로 제한하여 시각적으로 더 매력적이고 읽기 쉽게 만들 수 있습니다. 이 랩을 통해 웹 디자인 프로젝트에서 이 기술을 구현하는 방법을 배우게 됩니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

여러 줄 텍스트 자르기

index.html 및 style.css에 코드를 작성할 수 있습니다.

여러 줄의 텍스트를 지정된 줄 수로 제한합니다.

-webkit-line-clamp를 사용하여 표시할 최대 줄 수를 설정합니다.
-webkit-line-clamp를 적용하려면 display를 -webkit-box로, -webkit-box-orient를 vertical로 설정해야 합니다.
텍스트가 잘린 후 오버플로우를 숨기기 위해 overflow: hidden을 적용합니다.

<p class="excerpt">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod enim
  eget ultricies sollicitudin. Nunc aliquam arcu arcu, non suscipit metus luctus
  id. Aliquam sodales turpis ipsum, in vehicula dui tempor sit amet. Nullam quis
  urna erat. Pellentesque mattis dolor purus. Aliquam nisl urna, tempor a
  euismod a, placerat in mauris. Phasellus neque quam, dapibus quis nunc at,
  feugiat suscipit tortor. Duis vel posuere dolor. Phasellus risus erat,
  lobortis et mi vel, viverra faucibus lectus. Etiam ut posuere sapien. Nulla
  ultrices dui turpis, interdum consectetur urna tempus at.
</p>

.excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

요약

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