LabEx
로그인무료 가입

CSS 오버플로우를 사용한 텍스트 잘라내기

Beginner

This tutorial is from open-source community. Access the source code

소개

이 랩에서는 CSS 프로그래밍 세계에 뛰어들어 한 줄의 너비를 초과하는 텍스트를 잘라내는 방법을 배우겠습니다. overflow, white-space, 그리고 text-overflow 속성을 조합하여 사용함으로써, 잘린 텍스트의 끝에 줄임표 (ellipsis) 를 표시할 수 있습니다. 이 랩을 통해 웹사이트에서 텍스트 표시를 최적화하는 방법에 대한 더 깊은 이해를 얻을 수 있습니다.

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

텍스트 잘라내기 (Truncate Text)

index.html과 style.css는 이미 VM 에 제공되어 있습니다.

한 줄보다 긴 텍스트를 잘라내고 끝에 줄임표를 추가하려면 다음 CSS 속성을 사용하십시오.

  • overflow: hidden: 텍스트가 치수를 초과하는 것을 방지합니다.
  • white-space: nowrap: 텍스트가 높이에서 한 줄을 초과하는 것을 방지합니다.
  • text-overflow: ellipsis: 텍스트가 치수를 초과하는 경우 줄임표를 추가합니다.
  • 줄임표를 표시할 시점을 알기 위해 요소의 고정된 width를 지정합니다.

이 방법은 단일 행 요소에만 적용됩니다. 예를 들어:

<p class="truncate-text">If I exceed one line's width, I will be truncated.</p>
.truncate-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
}

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

요약

축하합니다! 텍스트 잘라내기 (Truncate Text) 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 실력을 향상시킬 수 있습니다.