들어가며: 레이아웃을 파괴하는 ‘긴 텍스트’와의 전쟁
게시판 목록이나 카드 UI를 구현할 때 가장 당황스러운 순간은 예상치 못한 긴 제목이 들어올 때입니다. 디자인은 한 줄인데 실제 데이터가 두 줄, 세 줄로 늘어나면서 전체 레이아웃이 무너지는 경험을 한 번쯤 해보셨을 겁니다.
단순히 글자를 자르는 것보다 사용자에게 “내용이 더 있다”는 신호를 주는 말줄임(…) 처리는 UI/UX 관점에서 매우 중요합니다. 오늘은 제가 실무에서 겪었던 텍스트 넘침 현상과 이를 해결하는 가장 깔끔한 방법들을 정리해 보았습니다.
1. 기본 개념: 왜 overflow: hidden만으론 부족할까?
처음 퍼블리싱을 접했을 때, 단순히 넘치는 걸 숨기기 위해 overflow: hidden만 적용했다가 텍스트가 툭 끊겨 보이는 어색한 결과물을 마주했습니다. 자연스러운 생략을 위해서는 다음 3가지 속성이 세트로 움직여야 합니다.
💡 한 줄 말줄임의 3대 요소
- white-space: nowrap; : 텍스트가 자동으로 줄바꿈되지 않게 강제합니다.
- overflow: hidden; : 영역 밖으로 나가는 텍스트를 숨깁니다.
- text-overflow: ellipsis; : 잘린 끝부분에 말줄임표(...)를 추가합니다.
2. 코드 예시 및 적용
실제 React 환경에서 컨테이너 너비를 벗어나는 텍스트를 처리하는 예시입니다.
CSS (Style Sheet)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<pre><code class="language-css">
/* 텍스트가 넘치는 컨테이너 */
.text-ellipsis {
width: 200px;
background-color: #fff3e0;
margin: 20px;
padding: 10px;
border-radius: 4px;
/* 핵심 로직 */
white-space: nowrap; /* 줄바꿈 방지 */
overflow: hidden; /* 넘치는 부분 숨김 */
text-overflow: ellipsis; /* 말줄임표 적용 */
/* border나 padding으로 인한 크기 계산 오차 방지 */
box-sizing: border-box;
}
</code></pre>
React Component
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from "react";
import "./App.css";
const TextCard = () => {
return (
<div className="container">
<div className="text-ellipsis">
안녕하세요! 프론트엔드 개발자로서 텍스트가 넘치는 현상을 해결하고 있습니다.
</div>
</div>
);
};
export default TextCard;
3. 실무 포인트: 개발하며 겪은 문제와 해결책
단순한 한 줄 처리를 넘어, 더 복잡한 요구사항이 들어올 수 있는데요. 제가 직접 겪었던 경험을 토대로 주의점을 공유합니다.
⚠️ 주의해야 할 실수 전략
- Flexbox와의 충돌: Flex 아이템 안에서 말줄임을 쓸 때는 부모에게
min-width: 0;혹은overflow: hidden;을 주지 않으면 아이템이 계속 늘어나 말줄임이 작동하지 않을 수 있습니다. - Block 요소 확인:
<span>같은 inline 요소에는 직접 적용되지 않습니다.display: block;또는inline-block;으로 변경이 필요합니다. - 너비 설정 필수:
width나max-width가 지정되어 있지 않으면 컨테이너가 텍스트를 따라 무한정 넓어지므로 주의해야 합니다.
만약 여러 줄을 생략해야 한다면?
한 줄이 아니라 ‘3줄까지만 보여주고 싶을 때’는 -webkit-line-clamp 속성을 활용합니다.
1
2
3
4
5
6
7
8
.multi-line-ellipsis {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3; /* 보여줄 줄 수 */
-webkit-box-orient: vertical;
line-height: 1.5em;
max-height: 4.5em; /* line-height * 줄 수 */
}
4. 방식별 비교 정리
상황에 맞는 최적의 방식을 선택해 보세요.
| 방식 | 주요 속성 | 장점 | 단점 |
|---|---|---|---|
| 한 줄 생략 | nowrap, ellipsis | 가장 가볍고 표준적인 방식 | 오직 한 줄만 가능 |
| 여러 줄 생략 | -webkit-line-clamp | 원하는 줄 수만큼 제어 가능 | 일부 구형 브라우저 호환성 체크 필요 |
| JS 기반 절삭 | substring() | 모든 브라우저 동일 동작 | 텍스트 너비 계산이 부정확함 |
마치며
텍스트 생략 처리는 단순한 CSS 속성 몇 줄의 문제가 아니라, 정보의 중요도를 판단하는 기준이 됩니다. 제목은 명확하게 한 줄로, 설명글은 가독성을 위해 두 줄 정도로 조절하는 등의 디테일이 모여 좋은 UI를 만듭니다.
혹시 적용 중에 레이아웃이 깨지거나 궁금한 점이 있다면 댓글로 남겨주세요! 함께 고민해 보겠습니다.