제목 줄바꿈이 어색할 때, text-wrap: balance로 한 단어만 남는 문제 정리
메인 카피나 제목이 두 줄로 넘어가면서 마지막 줄에 단어 하나만 덩그러니 남는 제목 줄바꿈 문제는 CSS text-wrap: balance 한 줄로 대부분 정리됩니다. 브라우저가 각 줄의 길이를 비슷하게 맞춰서 나눠 주기 때문입니다.
한국어 사이트에서 같이 써야 하는 word-break: keep-all, 본문용 pretty, 그리고 <br>로 억지로 끊을 때 생기는 문제까지 실무 기준으로 정리했습니다.
💡 <br>로 줄을 나눠 두면 되지 않나요?
디자인 시안 크기에서는 깔끔해 보이지만, 화면 폭이 바뀌면 이야기가 달라집니다. 태블릿이나 작은 노트북에서는 브라우저가 한 번 더 자르면서 세 줄이 되고, 짧은 줄과 긴 줄이 번갈아 나오는 계단 모양이 됩니다. 고객사 리뉴얼 검수 때 "폰에서 제목이 이상하게 끊긴다"는 요청의 상당수가 이 경우였습니다.
1. 제목에는 balance, 한국어는 keep-all과 함께
balance는 여러 줄에 걸친 글자 수를 최대한 고르게 나눕니다. 다만 한국어는 기본 설정에서 글자 단위로도 줄이 바뀌기 때문에, word-break: keep-all을 함께 줘야 띄어쓰기 단위로 끊기면서 단어가 반으로 쪼개지지 않습니다.
/* 한국어 제목: 단어 중간에서 끊기지 않게 + 줄 길이 맞추기 */
h1, h2, h3,
.main-copy {
word-break: keep-all;
text-wrap: balance;
}
계산 비용 때문에 줄 수 제한이 있습니다. 크롬 계열은 6줄 이하, 파이어폭스는 10줄 이하에서만 동작하고 그보다 길면 일반 줄바꿈으로 처리됩니다. 그래서 제목, 메인 카피, 카드 제목, 인용문처럼 짧은 글에만 쓰는 것이 맞습니다.
2. 긴 본문은 pretty로
본문 문단에는 pretty가 어울립니다. 줄 길이를 맞추기보다는 마지막 줄에 한두 글자만 남는 것을 피하는 쪽으로 동작합니다. 대신 조금 더 느린 계산을 쓰기 때문에 상품 목록처럼 텍스트가 아주 많은 화면에는 넣지 않는 편입니다.
/* 긴 본문: 마지막 줄에 한 단어만 남는 것 줄이기 */
.article p {
word-break: keep-all;
text-wrap: pretty;
}
지원하지 않는 브라우저에서는 이 속성을 그냥 무시하고 평소처럼 줄을 나눕니다. 깨질 걱정 없이 넣어 둘 수 있다는 점이 이 속성의 장점입니다.
3. 꼭 원하는 위치에서 끊어야 한다면
브랜드 슬로건처럼 끊는 위치가 정해져 있다면 <br>을 쓰되, 모바일에서는 숨겨서 자연스럽게 흐르게 합니다. 모바일에서는 balance가 줄 길이를 대신 맞춰 줍니다.
/* PC에서만 강제로 줄을 나누고 싶을 때 */
<h2>처음 만드는 홈페이지,<br class="pc-only">
어디서부터 시작할까요?</h2>
@media (max-width: 767px) {
.pc-only { display: none; }
}
| 상황 | 추천 설정 |
|---|---|
| 메인 카피, 섹션 제목 | keep-all + balance |
| 블로그·게시판 본문 | keep-all + pretty |
| 끊는 위치가 정해진 슬로건 | PC 전용 br + balance |
"제목 한 줄이 어떻게 끊기느냐도 첫인상입니다."
나눔웹은 시안 크기뿐 아니라 실제 휴대폰과 태블릿 폭에서 제목이 어떻게 보이는지까지 확인하고 오픈합니다.