[CSS] 말 줄임표 만들기 / 긴 글 줄이기

text의 길이가 특정 범위를 넘어가는 경우에 뒷 글자들이 잘려 없어지고 ...이 붙은 경우를 본 적 있을 것이다. CSS를 이용해서 이런 말 줄임표를 만들 수 있다. 페이지를 만들다 보면 은근히 자주 말 줄임표가 필요한 상황들이 생긴다.

여러 줄로 줄이는 경우

h1 {
  width: 300px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

1. width : 300px : text가 차지할 영역을 정해줘야한다. width는 부모 엘리먼트나 대상 엘리먼트에 적용한다.
2. overflow: hidden : 영역을 넘어가는 text를 보이지 않게 한다.
3. display: -webkit-box : 말 줄임표를 넣기 위해 display를 -webkit-box로 적용한다. (webkit이 적용 불가능한 브라우저가 있으므로 주의!)
4. -webkit-line-clamp: 2 : 텍스트를 몇 줄까지 표시할 것인지 정한다.
5. -webkit-box-orient: vertical : 콘텐츠의 정렬 방향을 정한다.
   
   

한 줄로 줄이는 경우

h1 {
  width: 300px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

위에서 여러줄로 줄이는 경우를 참고해서 -webkit-line-clamp를 1로 바꿔도 되지만 다른 방법이 하나 더 있다. 달라진 부분만 보자면

1. white-space: nowrap : 줄바꿈을 없애준다.
2. text-overflow: elipsis : 영역을 벗어난 부분이 있다면 '...' 말 줄임표를 만들어준다.
   
   

혹시나.. 클론 코딩 중에 클론코딩 중인 사이트와 내가 만든 사이트의 말줄임표 모양이 달라서 당황하신 분들께..
글꼴에 따라서 말 줄임표의 모양이 다릅니다.

 

+ PLUS )
이런 말 줄임표를 붙이는 경우에 대개 word-break 속성을 같이 사용해서 text가 어떤 기준으로 줄바꿈 되는지 정해준다. word-break 속성도 은근히 자주 쓰이는 속성이므로 새 글로 작성해보겠다!