부모 요소 밖으로 삐져나오는 긴 영단어 처리법
웹 개발을 하다 보면 아래와 같이 종종 영단어가 너무 길어서 모바일 환경과 같이 좁은 뷰포트(viewport)에서 부모 요소 밖으로 밀려나오는 경우를 접할 수 있는데요. 꼭 영문 웹사이트가 아니더라도 요즘에는 한국어 콘텐츠에도 워낙 외래어가 많이 사용되고, 게다가 인터넷 URL과 이메일 주소가 대부분 영어로 되어 있어서 의외로 한국어 웹사이트를 구현할 때도 쉽게 겪을 수 있는 문제입니다.
이번 포스팅에서는 웹에서 이렇게 원치 않게 부모 요소 밖으로 삐져나오는 영단어를 처리하는 다양한 방법을 알아보겠습니다.
영어와 한국어의 줄바꿈 차이
우선 영단어가 왜 부모 요소 밖으로 삐져나올 수 있는지는 의외로 많은 분들이 모르시는 부분이라서 짚고 넘어가면 좋을 것 같아요. 아무 설정을 해주지 않으면 기본적으로 웹에서 한국어는 단어의 중간에서 줄바꿈이 되는 반면에 영어는 단어의 중간에서 줄바꿈이 되지 않습니다.
예를 들어, 가장 긴 한국어 단어인 “얼룩보금자리산세비에리아”와 가장 긴 영어 단어인 “pneumonoultramicroscopicsilicovolcanoconiosis”를 똑같이 폭이 150px으로 고정된 부모 요소 안에 써볼까요?
위에 보이는 것과 같이 한글 “자”와 “리” 사이에서는 줄바꿈이 일어나지만, 알파벳 “m”과 “i” 사이에서는 줄바꿈이 일어나지 않는 것을 알 수 있습니다.
Shy 기호
밖으로 삐져나오는 영단어를 방지하는 가장 간단한 방법은 soft hyphen, 흔히 줄여서 shy라고 불리는 - 기호 또는 ­ 엔티티(entity)를 사용하는 것인데요.
영어에서 - 기호는 마치 공백 기호처럼 취급되기 때문입니다.
사실 책이나 잡지와 같은 활자 매체에서 많이 사용되는 방법이죠.
예를 들어, 가장 긴 영어 단어 사이의 중간중간에 3개의 - 기호를 추가해보겠습니다.
그런데 이 전통적인 방법은 요즘과 같이 웹이 다양한 화면 크기에서 소비되고 유동형(fluid)이나 반응형(responsive) 웹디자인이 대세인 상황에서는 적용이 좀 난감해지는데요.
왜냐하면 부모 요소의 폭이 변함에 따라서 - 기호를 찍어야 하는 지점이 계속 달라지기 때문입니다.
wbr 요소
만약에 - 기호가 화면에 표시되지 않기를 바란다면 대신에 <wbr> 요소를 사용할 수도 있습니다.
브라우저는 <wbr> 요소를 사용한 지점에서 우선적으로 줄바꿈을 하게 됩니다.
<wbr> 요소는 shy 기호보다 유동형/반응형 웹디자인을 할 때 좀 더 유리합니다.
가용 공간이 충분하여 줄바꿈이 일어나지 않을 때도 티가 나지 않기 때문입니다.
overflow-wrap 속성
자 그럼 지금부터 CSS를 이용해서 삐져나오는 영단어를 좀 더 근본적으로 해결할 수 있는지 알아볼까요?
첫 번째 방법은 부모 요소의 overflow-wrap 속성을 break-word로 스타일해주는 것인데요.
이렇게 해주면 부모 요소의 폭이 부족해서 영단어가 옆으로 삐져나와야 하는 상황에서 말 그대로 break word, 즉 단어를 쪼개줍니다.
참고로 overflow-wrap 속성 대신에 word-wrap 속성을 사용해도 동일한 효과를 얻을 수 있는데요.
CSS에서 공식적으로 속성의 이름이 word-wrap에서 overflow-wrap으로 바뀌었으므로 가급적 overflow-wrap을 사용하시기를 권장드립니다.
overflow-wrap에는 break-word 말고 anywhere라는 값도 있습니다.
둘 다 삐져나올 상황에서 단어를 쪼갠다는 결과는 같지만, 요소의 최소 폭을 계산할 때 이 쪼갬을 셈에 넣느냐에서 갈리는데요.
break-word는 단어를 쪼갤 수 있다는 사실을 최소 폭(min-content) 계산에 반영하지 않습니다.
그래서 브라우저는 여전히 “가장 긴 단어는 통째로 들어가야 한다”고 보고 요소의 최소 폭을 잡습니다.
반면 anywhere는 쪼갤 수 있다는 걸 계산에 넣기 때문에 최소 폭이 글자 하나 수준까지 줄어듭니다.
이 차이는 Flexbox나 Grid 안에서 티가 납니다.
칸이 내용의 최소 폭 때문에 안 줄어드는 상황이라면 anywhere가 답이고, 그런 문제가 없다면 break-word로 충분합니다.
.card {
overflow-wrap: anywhere; /* 칸 자체가 더 좁아질 수 있어야 할 때 */
}hyphens 속성
만약에 영어에서 줄바꿈을 일으킬 수 있는 - 기호를 개발자가 일일이 직접 추가하지 않고 자동으로 알아서 추가되면 얼마나 행복할까요? 😇
CSS에는 이것을 가능케 하는 속성이 바로 hyphens인데요.
이 속성을 auto로 설정해주면 영단어가 삐져나오지 않도록 마법처럼 적절한 위치에 - 기호가 붙게 됩니다.
다만 이 마법에는 조건이 하나 붙습니다.
HTML에 lang 속성이 지정되어 있어야 한다는 것인데요.
어느 위치에서 단어를 끊어도 되는지는 언어마다 규칙이 다르기 때문에, 브라우저는 lang 값을 보고 해당 언어의 하이픈 사전을 찾아 씁니다.
그래서 lang이 없으면 hyphens: auto를 걸어도 아무 일도 일어나지 않습니다.
<p lang="en">pneumonoultramicroscopicsilicovolcanoconiosis</p>
<!-- 하이픈이 들어감 -->
<p>pneumonoultramicroscopicsilicovolcanoconiosis</p>
<!-- 아무 일도 일어나지 않음 -->hyphens가 안 먹는다고 하시는 분들 대부분이 이 lang 속성을 빠뜨린 경우입니다.
한국어 페이지라면 보통 <html lang="ko">로 되어 있을 텐데, 영어 문단에만 하이픈을 넣고 싶다면 그 요소에 lang="en"을 따로 붙여주셔야 합니다.
브라우저 지원은 이제 걱정하지 않으셔도 됩니다.
hyphens 속성은 2023년 9월부터 주요 브라우저에서 두루 쓸 수 있게 되었거든요.
다만 언어별 하이픈 사전은 브라우저와 운영체제마다 갖춰진 정도가 달라서, 영어처럼 흔한 언어가 아니라면 기대만큼 촘촘하게 끊기지 않을 수도 있습니다.
그래서 실무에서는 hyphens 하나만 믿기보다 앞에서 살펴본 overflow-wrap을 함께 걸어두는 편이 안전합니다.
하이픈이 들어가면 그대로 예쁘게 끊기고, 사전이 없어 하이픈을 못 넣는 상황에서는 overflow-wrap이 최소한 요소 밖으로 삐져나오는 것만은 막아주니까요.
word-break 속성
이쯤에서 이러한 생각을 하시는 분이 있으실 것 같아요. 영어도 한국어처럼 단어의 중간에서 줄바꿈이 일어나면 되지 않나?
CSS의 word-break 속성을 break-all로 설정해주면 그러한 효과를 낼 수 있는데요.
이 방법은 한국인 입장에서는 큰 문제가 없어 보이지만 영어 사용자 입장에서는 적절하지 않은 사용자 경험이 될 수 있기 때문에 주의가 필요합니다.
문화적 차이일 수도 있지만 활자 매체든 디지털 매체든 영어에서는 공백 기호나 - 기호가 없는 지점에서 줄바꿈이 일어나면 어색하게 느껴진다고 합니다.
한편 word-break 속성에는 정반대 방향으로 작동하는 keep-all이라는 값도 있는데요.
break-all이 끊을 수 있는 지점을 늘리는 값이라면, keep-all은 반대로 줄일 수 있는 값입니다.
글 첫머리에서 봤듯이 한국어는 기본적으로 어절 한가운데서도 줄이 바뀌는데, keep-all을 걸면 공백에서만 줄이 바뀌어 어절이 통째로 보존됩니다.
이 글의 주제인 “삐져나오는 영단어”와는 방향이 반대라 여기서는 자세히 다루지 않겠습니다. 한국어 제목이나 본문의 줄바꿈을 다듬는 방법은 어색하게 끊기는 한국어 줄바꿈 다듬는 법에서 따로 정리했으니 참고 바랍니다.
text-overflow 속성
마지막으로 소개해 드리고 싶은 방법은 바로 text-overflow 속성을 ellipsis로 설정해주는 것인데요.
이렇게 스타일을 해주면 삐져나오는 부분이 말줄임 기호인 ...으로 대체가 됩니다.
여기서 주의하실 점은 text-overflow 하나만 걸어서는 아무 일도 일어나지 않는다는 것입니다.
말줄임 기호는 넘친 내용을 잘라낼 때 나타나는 것이라, 애초에 넘치는 상황이 만들어져야 하거든요.
그래서 아래 두 속성을 함께 지정해야 합니다.
.ellipsis {
white-space: nowrap; /* 줄바꿈을 막아 한 줄로 넘치게 만든다 */
overflow: hidden; /* 넘친 부분을 잘라낸다 */
text-overflow: ellipsis; /* 잘린 자리에 ...을 넣는다 */
}셋 중 하나라도 빠지면 말줄임 기호가 나오지 않는데요. CSS의 white-space 속성 사용법과 CSS의 overflow 속성 사용법에서 두 속성을 각각 자세히 다루었으니 함께 보시면 좋겠습니다.
이 방법을 사용할 때 주의할 부분은 툴팁(tooltip)과 같은 보조 UI를 사용하여 줄여진 부분을 끝까지 볼 수 있도록 해줘야 한다는 것입니다.
위 예제에서는 간단하게 HTML의 title 속성을 사용하여 마우스를 올렸을 때 전체 단어 또는 URL이 뜨도록 하였습니다.
마치며
지금까지 부모 요소의 폭이 충분하지 않아서 밖으로 삐져나오게 되는 영단어나 URL을 어떻게 처리할 수 있는지 실습을 통해 살펴보았습니다.
방법이 여러 가지라 헷갈리실 수 있는데, 실무에서는 대체로 이렇게 정리됩니다.
본문처럼 내용을 끝까지 보여줘야 하는 곳에는 overflow-wrap: break-word를 기본으로 깔고, 영어 비중이 높다면 lang 속성과 함께 hyphens: auto를 얹어 더 자연스럽게 끊습니다.
반대로 카드 제목이나 표 셀처럼 한 줄로 길이를 맞춰야 하는 곳에는 text-overflow: ellipsis 조합을 씁니다.
word-break: break-all은 영어권 독자에게 어색하게 읽히니 가급적 마지막 수단으로 남겨두시고요.
각 속성의 세부 동작이 궁금하시다면 MDN의 overflow-wrap 문서부터 살펴보시기를 추천드립니다.
This work is licensed under CC BY 4.0
