[CSS] 말줄임(ellipsis)에 관한 모든 것
[CSS] 말줄임(ellipsis)에 관한 모든 것
이번에는 위 그림처럼 width, height 고정된 영역에 길이가 긴 텍스트가 들어갈 경우
말줄임 처리하는 방법에 대해 알아보겠습니다.
강제로 잘라내는 방법
overflow: hidden 과 white-space 을 사용하여 컨텐츠를 잘라내는 방법입니다.
해당 속성을 모르시거나 헷갈리신다면, 아래 포스팅에 쉽게 정리해두었습니다. 참고해주세요
[html/css] HTML 공백 줄바꿈 그리고 white-space
[CSS] 제일 쉬운 overflow 설명
한 줄 처리
기본적으로 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 를 추가하면
글자가 잘리는 직전 끝부분이 ... 으로 표시되기 때문에
디자인이 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을 만들어두고 재사용하면
간편하고 가독성 좋게 코드를 작성할 수 있기 때문에 mixin 사용을 권장합니다.
글이 도움이 되셨다면 공감&댓글 부탁드립니다.
글 작성에 큰 힘이 됩니다. 🙂