[CSS] 말줄임표 쓰는 방법 (1줄 or 2줄 이상)

문제

공간은 제약되어 있고, 그 안에 내용은 넘치게 되는 경우 내용이 공간을 넘어가는 부작용이 일어나게 된다.

그럴 때 해결하는 방법은 내용에 말 줄임표 효과를 줘서 공간이 넘어가는 순간 '...'으로 표기하게 만드는 것이다.

 

해결

한 줄 말줄임표

<div>
  <p>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.</p>
</div>

html은 한 줄 말 줄임표 or 두 줄 이상 말 줄임표 모두 위와 동일하게 쓰였다.

 

p {
    display: block; /* 기본 상태가 block이 아닌 경우에는 줘야 함 */
    white-space: nowrap; /* 한 줄로 만들어줌 */
    overflow: hidden;
    text-overflow: ellipsis; /* 말줄임표 */
}

 

먼저 white-space 값에 nowrap을 주면서 줄바꿈없이 한 줄로 쭉 나가게 해주었고, 다음으로는 overflow: hidden 값을 주면서 공간을 삐져나간 p 태그의 내용을 숨기게끔 해주었다. 여기서 끝나면 overflow를 준 끝 부분의 경계가 애매하게 끊기는 것을 볼 수 있을 것이다.

따라서 말줄임표를 통해 이를 해결해줘야 하는데, 이 때 필요한 게 바로 text-overflow: ellipsis이다.

(여기서 중요한 점은 말줄임표를 주는 요소의 상태가 display: block이여야 한다.)

 

위와 똑같이 태그와 속성을 주게 되면 한 줄로 말 줄임표가 생기는 것을 볼 수 있다.

작은 박스 안의 내용이나 게시글의 제목만 노출되는 컨텐츠의 경우 한 줄로 끝나는 경우가 많기 때문에 위의 태그로 해결할 수 있겠지만, 조금 큰 박스 혹은 게시글의 제목이 아닌 내용까지 나오는 컨텐츠의 경우 어느정도 요약이 필요하기 때문에 한 줄이 아닌 두 줄 이상의 말 줄임표를 써야할 수도 있다.

 

두 줄 이상 말줄임표

div {
  width: 300px;
  height: 80px;
}

p {
  overflow: hidden;
  text-overflow: ellipsis; /* 말 줄임표 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 말 줄임표되는 줄의 수 */
}

한 줄 말줄임표 때 쓰였던 white-space는 두 줄 이상일 땐, 줄바꿈이 필요하기 때문에 없앴다.

그리고 -webkit-box라는 게 추가되었는데, 여기서 webkit이란 웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 응용 프로그램 프레임워크라는 뜻으로 구글, 사파리가 채용한 브라우저 엔진 이름이다.

 

display: -webkit-box부터 맨 아래 -webkit-line-clamp까지 주면 두 줄 이상일 때 말 줄임표가 적용되는 것을 볼 수 있다. 말 줄임표를 사용할 때는 위와 같은 방법들을 적용하면 손쉽게 해결할 수 있다.