CSS로 문자열 자르기

이 기사에서는 CSS를 사용하여 자르기 문자열이나 단락을 만드는 방법을 다룰 것입니다.

잘라내기란 무엇입니까?

Truncate는 특히 상단이나 끝을 잘라내어 더 짧게 만드는 것을 의미합니다. 단락에서는 줄을 잘라서 줄을 짧게 만듭니다.

Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem 
Ipsum has been the industry's standard dummy text ever since the 1500s when an 
unknown printer took a galley of type and scrambled it to make a type specimen book. 
It has survived not only five centuries, but also the leap into electronic typesetting.

위의 문단은 4줄로 되어 있고 우리는 그것을 2줄로 짧게 만들고 싶습니다. 이와 같이 -

Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem 
Ipsum has been the industry's standard dummy text ever since the 1500s, when....

사용 방법?

먼저 내 HTML이 어떻게 보이는지 살펴보겠습니다.

<div class="container">
  <h3>Truncate-2 (two line)</h3>
  <p class="truncate-2">Lorem Ipsum is simply dummy text of the printing and 
typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever 
since the 1500s, when an unknown printer took a galley of type and scrambled it to 
make a type specimen book. It has survived not only five centuries, but also the leap
into electronic typesetting, remaining essentially unchanged. It was popularised in 
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
more recently with desktop publishing software like Aldus PageMaker including 
versions of Lorem Ipsum.</p>
</div>

보시다시피 단락에 truncate-2 클래스를 적용했습니다. 이 클래스에는 다음 속성이 포함되어 있습니다.

.truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;    /* Change the number as per your requirement */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

그 결과는 다음과 같습니다.



코드펜-

마무리

이 기사가 마음에 드셨다면 ❤️를 누르는 것을 잊지 마시고 나중에 사용할 수 있도록 북마크에 추가하세요. 질문이나 제안 사항이 있으면 주저하지 말고 삭제하십시오. 또 봐요.

내 Newsletter