[HTML/CSS] css 말줄임 처리하기 | 텍스트 text-overflow: ellipsis

웹페이지를 작성할 때에는 말줄임(...)을 사용하는 경우가 많은 편이다.

말줄임표를 사용하게 되면, 더 많은 문장을 간결하게 생략하여 표시할 수 있다.

 

말줄임 표시하는 방법

Lorem ipsum dolor sit amet -> Lorem ipsum dolor sit...

위와 같이 표현 하기 위해서는 HTML과 CSS를 통해 처리해주어야한다.

 

See the Pen Untitled by HAJIN LEE (@rajin444) on CodePen.

 

말줄임을 2줄로 하기위해서는 -webkit-line-clamp를 이용하여 문자길이의 지정된 라인이 넘어가면

말줄임 처리를 해준다.

 

.ellipsis {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}