실무를 하다 보면 가볍게 이해한 스펙을 바탕으로 관습적으로 사용하는 속성들이 있다. 그중 word-break 속성과 word-wrap 속성에 대해 조금 더 명확하게 정리해보았다.
본 내용은 W3C 스펙문서에서 제공하는 내용 일부를 실무 경험을 바탕으로 의역 및 편집하여 작성한 것이다.
- 중국어/일본어/한글의 경우 W3C문서에서 CJK(Chinese, Japanes, Korean 의 약자)로 사용하고 있으며, 본 문서에서도 CJK로 지칭한다.
- 그 외 언어는 non-CJK(숫자, 영어, 베트남어 등)으로 지칭한다.
- 중단점은 ‘ · ’로 표기한다.
word-break 속성과 word-wrap 속성
실무에서 두 속성은 주로 줄 바꿈을 위해 사용한다. 먼저 각 속성이 무엇인지 간단히 살펴보자.
word-break : 아래 예제와 같이 단어의 분리를 어떻게 할 것인지 결정한다.
ex) (공백/띄어쓰기) 날씨가·좋아요
ex) (음절) 날·씨·가·좋·아·요·
word-wrap : 아래 예제와 같이 박스의 가로 영역을 넘친 단어 내에서 임의의 분리 여부를 결정한다.
ex)
두 속성의 역할은 다르지만 줄 바꿈을 위해 필요한 상황에 따라 선언하며, 또한 조합하여 선언하기도 한다. 지금부터 각 속성의 특징을 이해해보고, 조합하여 선언했을 때는 어떻게 달라지는지 자세히 살펴보도록 하자.
word-break 속성은 단어의 분리를 결정하여 줄 바꿈에 관여
줄 바꿈은 허용된 중단점에서 수행(soft wrap opportunity) 되는 것이며, 모든 속성이 기본값이라는 전제하에 줄 바꿈은 대부분의 non-CJK의 경우 ‘공백(띄어쓰기)’에서, CJK의 경우 ‘음절’에서 수행된다.
그리고 word-break 속성으로 중단점의 수행 기회(soft wrap opportunity)를 바꿀 수 있다. 값에 따라 어떤 차이가 있는지 확인해보자.
W3C에서 모든 어휘 자원(w3의 모든 [UAX14] 유니코드 내용)을 제공하는 것이 아니기 때문에 CSS는 줄 바꿈이 허용되는 곳을 완전히 정의하지 않으며 예외 사항이 존재할 수 있다.
태국어, 라오어 및 크메르어와 같은 언어는 단어를 구분하는데 공백이나 구두점을 사용하지 않는다.(음절 사이사이를 기반으로 한다는 정의도 없다.) 결과적으로 그러한 텍스트의 중단점 수행 기회를 식별하기 위해서는 어휘 자원이 필요하다.
word-break 속성 값
값은 normal(기본값), break-all, keep-all 이 있다. (keep-all 의 경우 IE에서는 계속 지원하였으나 webkit에서는 15년 6월부터 지원하였다.) 그럼 값에 따라 언어별로 중단점이 어떻게 달라지는지 확인해보자.
W3C의 word-break 예제 링크 바로가기
다음 EXAMPLE1, 2는 W3C 예제에 한글을 추가해 재편집한 내용이다.
EXAMPLE 1
단어가 혼합 된 단어 예제
한글 좋아요, 这是一些汉字, and some Latin, و کمی نوشتنن عربی, และตัวอย่างการเขียนภาษาไทย.
중단점은 ‘·’ 로 표기
- ‘
word-break: normal’ -
한·글·좋·아·요, 这·是·一·些·汉·字,·and·some·Latin,·و·کمی·نوشتنن·عربی·และ·ตัวอย่าง·การเขียน·ภาษาไทย.
- ‘
word-break: break-all’ -
한·글·어·좋·아·요, 这·是·一·些·汉·字,·a·n·d·s·o·m·e·L·a·t·i·n,·و·ﮐ·ﻤ·ﻰ·ﻧ·ﻮ·ﺷ·ﺘ·ﻦ·ﻋ·ﺮ·ﺑ·ﻰ,·แ·ล·ะ·ตั·ว·อ·ย่·า·ง·ก·า·ร·เ·ขี·ย·น·ภ·า·ษ·า·ไ·ท·ย.
- ‘
word-break: keep-all’ -
한글·좋아요,这是一些汉字,·and·some·Latin,·و·کمی·نوشتنن·عربی,·และตัวอย่างการเขียนภาษาไทย.
EXAMPLE 2
예를 들어, 일부 스타일의 CJK 조판에서 영어 단어는 공백이나 하이픈이 아닌 두 문자 사이에서 분리 할 수 있다. 이것은 ‘ word-break:break-all‘ 로 활성화 할 수 있다 .
일본어에 포함 된 영어 텍스트는 단어간 임의의 지점에서 깨졌다.
또 다른 예로, 한글에는 두 개의 한글 음절 (‘word-break: normal‘) 사이 또는 영어와 같이 주로 공백 (‘word-break: keep-all‘) 의 두 가지 스타일이 있다.
각 줄의 마지막에 한글이 올 때 줄 나눔 기 /* break between syllables */ 준을 “글자” 또는 “어절” 단위로 한다.
각 줄의 마지막에 한글이 올 때 줄 나눔 /* break only at spaces */ 기준을 “글자” 또는 “어절” 단위로 한다.
word-break 속성 값의 중단점
중단점과 중단점이 수행되는 기회가 의미상 다르긴 하지만 간단하게 설명하기 위해 ‘중단점’이라는 용어로 통칭하겠다.
위 w3의 예제에서 살펴본 것처럼 언어별로 기본(normal)으로 갖는 중단점이 다르다.
다음 표는 언어별로 속성 값에 따라 달라지는 중단점을 정리한 내용이다.
| normal (기본값) | break-all | keep-all (CJK에만 적용됨) | |
| non-CJK | 중단점: 공백(띄어쓰기, 하이픈’-‘) | 중단점: 음절 | 중단점: 공백(띄어쓰기, 하이픈’-‘) |
| CJK | 중단점: 음절 | 중단점: 음절 | 중단점: 공백(띄어쓰기, 하이픈’-‘, 그 외 기호) |
word-break 속성 값 테스트(word-wrap 속성은 기본값)
https://codepen.io/witblog/full/gRrdPR/
#중단점이 ‘공백’인 경우 (예: some·Latin | 한글·좋아요)
[1] 단어가 한 줄의 남은 공간보다 길면 줄 바꿈 된다.
[2] 박스 영역의 가로 값 보다 긴 단어는 중단점이 나타날 때까지 박스를 강제적으로 뚫고 넘치게 된다.
[3] 박스 영역의 가로 값 보다 긴 단어에 기호가 포함되어 있다면, ‘언어+기호’ 조합의 ‘언어’에 따라 기호가 중단점이 되기도 한다.
non-CJK는 ‘기호’가 하이픈 ‘-‘ 일 때 줄 바꿈 된다.(그 외 기호 중단점으로 작용 X)
CJK는 하이픈뿐만 아니라 대부분의 기호가 중단점으로 작용하여 줄 바꿈 된다.(파이어폭스에서는 기호를 중단점으로 작용X)
[4] 박스 영역의 가로 값 보다 긴 기호가 공백 없이 나열된다면, 중단점이 나타날 때까지 박스를 강제적으로 뚫고 넘치게 된다.
#중단점이 ‘음절’인 경우( 예: s·o·m·e·L·a·t·i·n | 한·글·좋·아·요)
한 줄의 가장 끝부분에 위치한 단어가 글자로 나뉘어 줄 바꿈 된다.
그래서 [1], [2], [3] 모두 음절에서 줄 바꿈 되기 때문에 박스 영역을 넘치지 않는다.
하지만 예외도 있다.
[5] 박스 영역의 가로 값 보다 긴 단어에 기호(마침표’.’ 와 느낌표’!’등) 으로만 연속적으로 나열 된다면, 중단점이 음절이라 할지라도 박스 가로 영역을 강제적으로 뚫고 넘치게 된다.
모든 기호에서 발생하는 건 아니며 일부 기호에서 예외적으로 발생한다.
word-wrap 속성은 박스의 가로 영역을 넘친 단어 내에서 임의의 분리 여부를 결정하여 줄바꿈에 관여
넘친 단어를 줄 바꿈 하고 싶다면, word-wrap 속성의 값을 바꾸면 된다.
이때, 넘친 단어의 임의의 분리는 음절에서 발생하며 white-space 속성이 기본 값(normal) 일 때만 적용된다.
word-wrap 속성의 값
word-wrap 속성의 값은 normal(기본값), break-word 가 있다.
다음 표는 속성 값에 따라 박스 가로 영역을 단어가 넘치는지 유무를 정리한 내용이다.
| normal (기본값) | break-word | |
|---|---|---|
| non-CJK | 단어넘침 O | 단어넘침 X |
| CJK | 단어넘침 X | 단어넘침 X |
word-wrap 속성 값 테스트(word-break 속성은 기본값)
https://codepen.io/witblog/full/VWaGbm/
두 속성 조합 테스트
다음은 word-break 속성의 각 값에 word-wrap: break-word를 공통적으로 선언하여, 박스의 가로 영역을 넘치는 문자열이 없도록 테스트하였다.
첫 번째 테스트 화면은 word-break: normal; word-wrap: break-word;이기 때문에 word-wrap: break-word;만 선언했을 때의 화면과 동일하다.
두 번째 테스트 화면은 중단점은 모두 음절로 적용하고 넘치는 문자열이 없도록 적용한 것이다.
([5]는 word-wrap: break-word; 적용해도 크롬에서 단어가 넘치는 버그가 있다. 이때, 표준은 아니지만 word-break:break-word라는 웹킷에 적용되는 속성을 선언하면 해결 가능하다.)
세 번째 테스트 화면은 중단점은 모두 공백(띄어쓰기)로 적용하고 넘치는 문자열이 없도록 적용한 것이다.
https://codepen.io/witblog/full/yXOxmB/
웹에서 줄바꿈은 자연스러운 현상처럼 보이지만 다양한 원리에 입각하고 있다는 것을 알았다. 위의 모든 테스트 결과를 외울 필요는 없지만, 언어별 특징이 다르다는 것을 기억하고 각 속성과 값에 따라 원리가 어떻게 달라지는지 이해하는 것이 중요하다고 생각한다. 앞으로 위 속성들을 선언할 때 조금이나마 도움이 되기를 바라며 글을 마친다.
5개의 댓글
Yongwon Kim · 2017년 7월 26일 10:40 오후
글 잘 봤습니다.^^
도움이 많이 되겠어요.
오승환 · 2017년 11월 9일 10:49 오후
이런 쉬운 예시랑, 직접 만든 자료 좋아요!
Amerimnos · 2018년 2월 24일 9:05 오전
감사합니다!!
charty · 2023년 1월 17일 10:23 오전
다른 정리들보다 너무 상세해서 이해하기 좋았습니다
감사합니다.
나중에 정리 – kate kim · 2018년 10월 12일 11:38 오전
[…] Pure CSS for multiline truncation with ellipsis 8 SIMPLE CSS3 TRANSITIONS THAT WILL WOW YOUR USERS word-break 속성과 word-wrap 속성 알아보기 Battling BEM […]