[CSS] 말줄임(ellipsis)에 관한 모든 것

[CSS] 말줄임(ellipsis)에 관한 모든 것

 

css 말줄임(ellipsis) 처리 방법 알아보기

 

 

---

 

 

 

 

 

이번에는 위 그림처럼 width, height 고정된 영역에 길이가 긴 텍스트가 들어갈 경우

 

말줄임 처리하는 방법에 대해 알아보겠습니다.

 

---

 

강제로 잘라내는 방법 

 

overflow: hidden 으로 crop

 

 

overflow: hidden 과 white-space 을 사용하여 컨텐츠를 잘라내는 방법입니다.

해당 속성을 모르시거나 헷갈리신다면, 아래 포스팅에 쉽게 정리해두었습니다. 참고해주세요

 

[html/css] HTML 공백 줄바꿈 그리고 white-space
[CSS] 제일 쉬운 overflow 설명

 

css 말줄임 처리 코드

 

한 줄 처리

기본적으로 text가 길어져 width를 넘게 되면 자동 개행됩니다.
이때 white-space: nowrap를 주게 되면 자동 개행되지 않습니다. 
(white-space 에 대한 자세한 설명은 dev-sangziii.tistory.com/26 에 있습니다)
이 상태에서 overflow: hidden 으로 넘치는 부분(초과한 text 영역)을 감추는 방법

 

여러 줄 처리

white-space: nowrap 을 주지 않고 개행시킨 다음
line-height x 노출할 줄 수를 height 로 설정
그리고 overflow: hidden 으로 넘치는 부분(초과한 text 영역)을 감추는 방법

 

예제

See the Pen ellipsis force crop by 이상진 (@sangziii) on CodePen.

 

 

 

 

 

 

 

 

 

 

 

단점

 

 

간단한 방법이지만 글자가 도중에 잘려서 UI가 깨진 것처럼
ugly 하게 보이기 때문에 단점이 있어서 실무에서는 잘 사용되지 않습니다.

---

text-overflow 속성을 활용한 방법

 

text-overflow: ellipsis 로 말줄임

 

 

text-overflow: ellipsis 를 추가하면

글자가 잘리는 직전 끝부분이 ... 으로 표시되기 때문에
디자인이 ugly 해지지 않고 자연스럽게 처리할 수 있습니다.

 

1줄 말줄임

한줄 말줄임

여러줄 말줄임

여러줄 말줄임

 

여러줄(n줄) 말줄임 하기 위해선

display를 webkit-box, -webkit-line-clamp 에 노출시킬 줄 수(n),
-webkit-box-orient 에 vertical 을 추가하면 됩니다.

 

예제

See the Pen ellipsis using text-overflow by 이상진 (@sangziii) on CodePen.

 

 

 

 

 

 

 

---

 

scss 믹스인(mixin) 활용법

scss 말줄임 믹스인(mixin)

 

scss 를 사용할 경우 mixin을 만들어두고 재사용하면
간편하고 가독성 좋게 코드를 작성할 수 있기 때문에 mixin 사용을 권장합니다.

 

 

글이 도움이 되셨다면 공감&댓글 부탁드립니다.
글 작성에 큰 힘이 됩니다. 🙂