들어가며
카드 UI나 게시글 목록을 만들다 보면 제목이나 설명이 예상보다 길어질 때가 많습니다.
텍스트가 길어지면 카드 높이가 들쭉날쭉해지고, 옆 영역을 침범하거나 레이아웃이 깨질 수도 있습니다.
이럴 때 자주 사용하는 방식이 말줄임표 처리입니다.
프론트엔드 개발자가 자주 만나는...
이번 글에서는 CSS로 한 줄 말줄임과 여러 줄 말줄임을 처리하는 방법을 정리해볼게요.
한 줄 말줄임 처리하기
한 줄 텍스트를 말줄임 처리하려면 보통 세 가지 속성을 함께 사용합니다.
1
2
3
4
5
6
.text-ellipsis {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
각 속성의 역할은 다음과 같습니다.
white-space: nowrap은 텍스트가 다음 줄로 내려가지 않도록 막아줍니다.
overflow: hidden은 영역을 벗어난 텍스트를 숨깁니다.
text-overflow: ellipsis는 숨겨진 텍스트 끝에 말줄임표를 표시합니다.
예시 코드
1
2
3
<div class="card-title">
프론트엔드 개발자가 자주 만나는 긴 제목 텍스트입니다.
</div>
1
2
3
4
5
6
.card-title {
width: 240px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
이렇게 작성하면 정해진 너비를 넘어가는 텍스트가 한 줄에서 잘리고, 끝에 ...이 표시됩니다.
width가 꼭 필요해요
말줄임 처리가 동작하려면 요소가 어느 정도 너비 안에서 잘려야 하는지 알아야 합니다.
그래서 width, max-width, 또는 부모 요소를 통해 계산 가능한 너비가 필요합니다.
1
2
3
4
5
6
.card-title {
max-width: 240px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
너비가 정해져 있지 않으면 요소가 텍스트 길이만큼 계속 늘어날 수 있고, 그러면 말줄임표가 나타나지 않을 수 있습니다.
inline 요소에서는 바로 적용되지 않을 수 있어요
span 같은 inline 요소에 말줄임을 바로 적용하면 원하는 대로 동작하지 않을 때가 있습니다.
1
<span class="tag-name">아주 긴 태그 이름입니다</span>
이럴 때는 display를 바꿔주면 됩니다.
1
2
3
4
5
6
7
.tag-name {
display: inline-block;
max-width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
inline-block이나 block으로 바꿔주면 너비를 기준으로 말줄임 처리를 할 수 있습니다.
Flex 안에서 말줄임이 안 될 때
실무에서 자주 만나는 문제 중 하나가 Flexbox 안에서 말줄임이 동작하지 않는 경우입니다.
1
2
3
4
5
6
<div class="card">
<div class="content">
<p class="title">매우 긴 제목 텍스트입니다.</p>
</div>
<button>보기</button>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.card {
display: flex;
}
.content {
flex: 1;
min-width: 0;
}
.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
여기서 핵심은 .content에 들어간 min-width: 0입니다.
Flex 아이템은 기본적으로 내용의 최소 너비를 유지하려고 하기 때문에, 긴 텍스트가 있으면 줄어들지 않을 수 있습니다.
min-width: 0을 넣어주면 Flex 아이템이 부모 너비 안에서 줄어들 수 있고, 그 결과 말줄임도 정상적으로 동작합니다.
여러 줄 말줄임 처리하기
한 줄이 아니라 2줄이나 3줄까지만 보여주고 싶을 때는 line-clamp를 사용할 수 있습니다.
1
2
3
4
5
6
.description {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
이 코드는 텍스트를 최대 3줄까지만 보여주고, 그 이후는 말줄임 처리합니다.
1
2
3
<p class="description">
이 설명은 길어질 수 있기 때문에 카드 UI에서는 최대 세 줄까지만 보여주고 나머지는 말줄임으로 처리합니다.
</p>
한 줄과 여러 줄 비교하기
| 상황 | 사용 방식 |
|---|---|
| 제목처럼 한 줄만 보여줄 때 | white-space, overflow, text-overflow |
| 설명처럼 여러 줄을 보여줄 때 | -webkit-line-clamp |
| Flex 안에서 동작하지 않을 때 | 부모 또는 flex item에 min-width: 0 |
말줄임은 단순히 text-overflow: ellipsis 하나만 넣는다고 항상 동작하지 않습니다.
텍스트가 줄어들 수 있는 영역인지, 줄바꿈이 막혀 있는지, 넘친 부분이 숨겨지는지까지 함께 봐야 합니다.
마무리
텍스트 말줄임 처리는 작은 CSS처럼 보이지만 카드 UI, 목록 UI, 반응형 레이아웃에서 자주 필요합니다.
한 줄 말줄임은 white-space: nowrap, overflow: hidden, text-overflow: ellipsis를 함께 사용합니다.
여러 줄 말줄임은 -webkit-line-clamp를 사용하면 됩니다.
그리고 Flexbox 안에서 말줄임이 되지 않는다면 min-width: 0을 먼저 확인해보면 좋습니다.