1. 목적

텍스트가 컨테이너 박스의 바깥으로 빠져나오는 현상을 텍스트 오버플로우라고 부른다.
컨테이너에 고정된 width value를 줄 때 발생한다.

이 문제는 줄바꿈에 관한 2가지 css property인 word-break와 overflow-wrap으로 해결가능하다.
(word-wrap은 overflow-wrap과 동의어이다.(mdn 참조) )

이 글에서는 다루는건 이렇다

이 둘의 기본적인 기능
둘의 차이점
실전에서 사용하는 조합 방식.

2. word-break

텍스트 오버플로우가 발생할 시 자동으로 줄바꿈이 되는데, 이 때 줄바꿈을 위한 텍스트의 분절 규칙을 설정한다.
분절이란, 텍스트를 자르는 단위로 공백 분절과 음절 분절로 나눈다.

공백 분절은 공백을 기준으로 줄바꿈하는 방식이다.
(공백과 하이픈(-)은 동일한 효과를 낸다.)

공백분절 예시
아버지가 가방을 챙기셨다.
apple is red

=> 아버지가^가방을^챙기셨다.
=> apple^is^red

(^ 는 줄바꿈이 되는 단위를 말한다. )

음절 분절은 음절 기준으로 줄바꿈하는 방식이다.

음절분절 예시
아버지가 가방을 챙기셨다.

=> 아^버^지^가^가방을 ^ 챙^기^셨^다.
=> a^p^p^l^e^i^s^r^e^d

(^ 는 줄바꿈이 되는 단위를 말한다. )

최초 값: normal
상속여부 : 상속됨
애니메이션 불가

설명에 사용되는 문자는 크게 4가지로 분류된다.

CJK
- 중국어, 일본어, 한국어에 사용되는 한자, 한글 등을 의미한다.
Non-CJK
- 그 외의 언어들, 특히 영어권 언어를 의미한다.
숫자
특수문자

value (아래 예시 같이 볼 것)

normal

기본값이다.
CJK : 음절 분절이 적용된다.
NO-CJK: 공백 분절이 적용된다.

특수문자만 사용: 공백없이 연결된 특수기호 전체를 한 음절 취급(특수기호 집합)

ex)
!!!!!! !!!!! ???? .....
=> !!!!!!^ !!!!!^ ????^ .....

(^ 는 줄바꿈이 되는 단위를 말한다. )

문자+특수기호: 문자 한개는 뒤에 오는 특수기호집합과 한 음절로 취급한다.(특수기호+문자는 별도의 음절로 취급된다.)

ex)
국가는!!!! 모성!!!의 보호를 위하!!!!여 노력하여야 한다.
//'는!!!!' 이 한 음절로 계산된다.//
//이후 분절 규칙은 CJK, No-CJK의 방식과 동일하다.//

=> 국^가^는!!!!^ 모^성!!!^의^ 보^호^를^ 위^하!!!!^여^ 노^력^하^여^야^ 한^다.
//word-break: normal에 의해 CJK는 음절 분절이 적용된다.//

숫자만: 문자랑 동일하게 하나 하나가 별도의 음절로 취급한다. 공백 분절이다.
clk(음절-띄어쓰기)+숫자: 문자와 숫자는 별도로 각자의 분절 방식 가져감
no-clk(공백-띄어쓰기)+숫자: 공백없이 연결된 no-clk문자와 숫자는 한 음절 취급(숫자 위치는 상관없음)

서로 다른 문자를 조합하는 경우 아래 규칙을 따른다(이 규칙은 value에 상관없이 공용 규칙이다)

공백 분절 방식 문자와 음절 분절 방식 문자가 공백없이 결합되면 각자의 분절 방식에 따라 처리된다.
만약 동일한 분절 방식의 문자가 결합되면 하나의 단어로 취급됨
이 규칙은 value에 상관없이 공용 규칙이다.

word-break: normal 일땐
CJK는 음절 분절, No-CJK는 공백 분절, 숫자는 공백 분절이다.

따라서 이런 예시가 있다면
안녕123하세요456 반갑789습912니다.

=> 아래와 같이 분절된다.
안^녕^123^하^세^요^456^반^갑^789^습^912^니^다.

반면, 이런 예시가 있다면
hello123 m456y 789name 912wh345a67

=> 아래와 같이 분절된다.
hello123^ m456y^ 789name^ 912wh345a67

다음 속성을 소개하기 전에 아래 예시를 함께 확인 하면 편하다.

break-all

CJK : 음절 분절이 적용된다.
NO-CJK: 음절 분절이 적용된다.
숫자: 음절 분절이 적용된다.

word-break

:normal

clk-china

spacing

方其禮樂興邦仁義設敎則怪力亂神在所不語然而帝王之將興也

no-spacing

方其禮樂興邦仁義設敎則怪力亂神在所不語然而帝王之將興也

clk-korea

spacing

국가는 모성의 보호를 위하여 노력하여야 한다. 국가의 세입·세출의 결산, 국가 및 법률이 정한 단체의 회계검사와 행정기관 및 공무원의 직무에 관한 감찰을 하기 위하여 대통령 소속하에 감사원을 둔다.

no-spacing

가나다라마바사아자차카타파하가나다라마바사아자차카타파하

non-clk

spacing

Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur aspernatur esse natus eum atque assumenda totam voluptatibus? Consequuntur rerum sunt aperiam quibusdam doloribus dolore omnis eius porro adipisci! Assumenda, illum.

no-spacing

asodanjckdajkcvsdnkadnkjadnaednajsjk

특수기호

spacing

특수기호만 사용

!!! !! !!!! !!!!!! !!!!

특수기호와 clk문자 혼합

국가는!!!! 모성!!!의 보호를 위하!!!!여 노력하여야 한다. 국가의 세입·세출의 결산, 국가 및 법률이 정한 단체의 회계검사와........ 행정기관 및 공무!!!1원의 직무에 관한 감찰을 하기 위하여 대통령 소속!!!!하에 감사원을 둔다.

특수기호와 no-clk문자 혼합

!ck!ll! !!!kfj sl!jn!!! fls nv!! snjgv!!! skjfv!!!!!!! 1ljsflj

no-spacing

특수기호만 사용

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

특수기호와 clk문자 혼합

가나다!!!!!!!!!!!!!!!!!!라마바!!!사아자!!!!차카타파!!!!!!!!하가나다라마바사아자차카!!!!타파하

특수기호와 no-clk문자 혼합

ckll!!!!!!!!!kfjsl!jn!!!flsnv!!snjgv!!!skjfv!!!!!!!1ljsflj

숫자

spacing

숫자만 사용

131 1321312 42514413 13131

숫자+clk문자

안녕하세요131 13예제문자21312 42입니다514413문자예시 입니다1313흠1

숫자+no-clk문자

Lor231231em 1312ipsum1312 do2131lor 31sit amet13 11co33nsecte44tur66

no-spacing

28138438473929372394472479

word-break

:break-all

clk-china

spacing

方其禮樂興邦仁義設敎則怪力亂神在所不語然而帝王之將興也

no-spacing

方其禮樂興邦仁義設敎則怪力亂神在所不語然而帝王之將興也

clk-korea

spacing

no-spacing

가나다라마바사아자차카타파하가나다라마바사아자차카타파하

non-clk

spacing

no-spacing

asodanjckdajkcvsdnkadnkjadnaednajsjk

특수기호

spacing

특수기호만 사용

!!! !! !!!! !!!!!! !!!!

특수기호와 clk문자 혼합

특수기호와 no-clk문자 혼합

!ck!ll! !!!kfj sl!jn!!! fls nv!! snjgv!!! skjfv!!!!!!! 1ljsflj

no-spacing

특수기호만 사용

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

특수기호와 clk문자 혼합

가나다!!!!!!!!!!!!!!!!!!라마바!!!사아자!!!!차카타파!!!!!!!!하가나다라마바사아자차카!!!!타파하

특수기호와 no-clk문자 혼합

ckll!!!!!!!!!kfjsl!jn!!!flsnv!!snjgv!!!skjfv!!!!!!!1ljsflj

숫자

spacing

숫자만 사용

131 1321312 42514413 13131

숫자+clk문자

안녕하세요131 13예제문자21312 42입니다514413문자예시 입니다1313흠1

숫자+no-clk문자

Lor231231em 1312ipsum1312 do2131lor 31sit amet13 11co33nsecte44tur66

no-spacing

28138438473929372394472479

word-break

:keep-all

clk-china

spacing

方其禮樂興邦仁義設敎則怪力亂神在所不語然而帝王之將興也

no-spacing

方其禮樂興邦仁義設敎則怪力亂神在所不語然而帝王之將興也

clk-korea

spacing

no-spacing

가나다라마바사아자차카타파하가나다라마바사아자차카타파하

non-clk

spacing

no-spacing

asodanjckdajkcvsdnkadnkjadnaednajsjk

특수기호

spacing

특수기호만 사용

!!! !! !!!! !!!!!! !!!!

특수기호와 clk문자 혼합

특수기호와 no-clk문자 혼합

!ck!ll! !!!kfj sl!jn!!! fls nv!! snjgv!!! skjfv!!!!!!! 1ljsflj

no-spacing

특수기호만 사용

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

특수기호와 clk문자 혼합

가나다!!!!!!!!!!!!!!!!!!라마바!!!사아자!!!!차카타파!!!!!!!!하가나다라마바사아자차카!!!!타파하

특수기호와 no-clk문자 혼합

ckll!!!!!!!!!kfjsl!jn!!!flsnv!!snjgv!!!skjfv!!!!!!!1ljsflj

숫자

spacing

숫자만 사용

131 1321312 42514413 13131

숫자+clk문자

안녕하세요131 13예제문자21312 42입니다514 413문자예시 입니다13 13흠1

숫자+no-clk문자

Lor231231em 1312ipsum1312 do2131lor 31sit amet13 11co33nsecte44tur66

no-spacing

28138438473929372394472479

그 외 특수문자 및 결합법칙은 normal과 동일하다.(위 참조)

keep-all
CJK : 공백 분절이 적용된다.
NO-CJK: 공백 분절이 적용된다.
숫자: 공백 분절이 적용된다.

그 외 특수문자 및 결합법칙은 normal과 동일하다.(위 참조)

여기서 중요한건 이거다.

1. 음절 분절(주로 break-all)은 텍스트 오버플로우를 막는 가장 좋은 방법이지만, 단어가 깨지므로 가독성이 좋지 않다.
2. 반면, 공백 분절(주로 keep-all)은 가독성은 좋지만, 공백없이 긴 단어는 오버플로우가 발생한다.
3. 특수문자를 길게 사용할 경우, 분절이 되지 않아 오버플로우가 발생한다.

따라서, 이 문제를 해결하려면 텍스트를 감싼 박스의 크기가 넉넉할 땐 공백 분절을 하면서, 박스 크기가 부족할 땐 음절 분절을 하여 텍스트 오버플로우를 예방해야 한다.
이 문제를 해결하기 위해 필요한 것이 overflow-wrap 이다.

참고
break-word

더 이상 사용되지 않는 value이다.
하지만, 설정된 경우 overflow-wrap 속성의 실제 값에 관계없이 word-break: normal 및 overflow-wrap: anywhere 와 동일한 효과를 낸다.
(overflow-wrap:anywhere 은 mdn에서도 안나오지만, overflow-wrap:break-word와 거의 동일하다.)

3. overflow-wrap(word-wrap)

텍스트가 오버플로우될 경우 줄바꿈을 위한 임의의 분리 여부를 결정한다.
이 말만 보면, word-break와 비슷하게 줄바꿈을 하는 역할처럼 보이지만, value 설명을 보면 그렇지 않다.

value (아래 예시 같이 볼 것)

normal

기본값이다.
word-break로 설정된 분절 규칙에 따라서만 줄바꿈된다.

break-word
word-break의 분절 규칙으로도 해결되지 않는 오버플로우가 발생할시, 음절 분절을 실행한다.
예컨대, ' word-break:keep-all ' 인 텍스트는 평상 시에는 공백 분절이 적용되지만,
공백분절을 해도 오버플로우가 해결되지 않을 땐 음절 분절이 적용된다.
(아래의 예시를 보자.)

단, white-space 속성이 기본 값(normal) 일 때만 적용된다.
아래를 보면 알겠듯, 특수문자의 오버플로우 문제도 해결된다.

word-break

:keep-all

clk-china

spacing

方其禮樂興邦仁義設敎則怪力亂神在所不語然而帝王之將興也

no-spacing

方其禮樂興邦仁義設敎則怪力亂神在所不語然而帝王之將興也

clk-korea

spacing

no-spacing

가나다라마바사아자차카타파하가나다라마바사아자차카타파하

non-clk

spacing

no-spacing

asodanjckdajkcvsdnkadnkjadnaednajsjk

특수기호

spacing

특수기호만 사용

!!! !! !!!! !!!!!! !!!!

특수기호와 clk문자 혼합

특수기호와 no-clk문자 혼합

!ck!ll! !!!kfj sl!jn!!! fls nv!! snjgv!!! skjfv!!!!!!! 1ljsflj

no-spacing

특수기호만 사용

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

특수기호와 clk문자 혼합

가나다!!!!!!!!!!!!!!!!!!라마바!!!사아자!!!!차카타파!!!!!!!!하가나다라마바사아자차카!!!!타파하

특수기호와 no-clk문자 혼합

ckll!!!!!!!!!kfjsl!jn!!!flsnv!!snjgv!!!skjfv!!!!!!!1ljsflj

숫자

spacing

숫자만 사용

131 1321312 42514413 13131

숫자+clk문자

안녕하세요131 13예제문자21312 42입니다514 413문자예시 입니다13 13흠1

숫자+no-clk문자

Lor231231em 1312ipsum1312 do2131lor 31sit amet13 11co33nsecte44tur66

no-spacing

28138438473929372394472479

word-break

:keep-all

overflow-wrap

:break-word

clk-china

spacing

方其禮樂興邦仁義設敎則怪力亂神在所不語然而帝王之將興也

no-spacing

方其禮樂興邦仁義設敎則怪力亂神在所不語然而帝王之將興也

clk-korea

spacing

no-spacing

가나다라마바사아자차카타파하가나다라마바사아자차카타파하

non-clk

spacing

no-spacing

asodanjckdajkcvsdnkadnkjadnaednajsjk

특수기호

spacing

특수기호만 사용

!!! !! !!!! !!!!!! !!!!

특수기호와 clk문자 혼합

특수기호와 no-clk문자 혼합

!ck!ll! !!!kfj sl!jn!!! fls nv!! snjgv!!! skjfv!!!!!!! 1ljsflj

no-spacing

특수기호만 사용

!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

특수기호와 clk문자 혼합

가나다!!!!!!!!!!!!!!!!!!라마바!!!사아자!!!!차카타파!!!!!!!!하가나다라마바사아자차카!!!!타파하

특수기호와 no-clk문자 혼합

ckll!!!!!!!!!kfjsl!jn!!!flsnv!!snjgv!!!skjfv!!!!!!!1ljsflj

숫자

spacing

숫자만 사용

131 1321312 42514413 13131

숫자+clk문자

안녕하세요131 13예제문자21312 42입니다514 413문자예시 입니다13 13흠1

숫자+no-clk문자

Lor231231em 1312ipsum1312 do2131lor 31sit amet13 11co33nsecte44tur66

no-spacing

28138438473929372394472479

anywhere

break-word와 거의 비슷한 기능을 하는데, 차이가 있다면 컨테이너의 min-content를 고려하여 자른다는 것이다. 나도 이 매커니즘이 잘 이해가 안되긴 하는데, 간단한 예시는 이렇다,

직접 뷰포트 너비를 최대한 줄여보면 확인이 될 것이다.

<style>
.mom {

  border: 10px solid black;
  background-color: tomato;
  height: 300px;
  font-size:28px;
}


.son1 {
  width: fit-content;
  background-color: slateblue;
  margin: 10px;
  word-wrap: break-word;

}

.son2 {
  width: fit-content;
  background-color: skyblue;
  margin: 10px;

  word-wrap: anywhere;

}


</style>

<div class="mom">
      <div class="son1">
        <p>adadasdas dada dsada asdsad</p>
      </div>
      
       <div class="son2">
        <p>adadasdas dada dsada asdsad</p>
      </div>
    </div>

adadasdas dada dsada asdsad

4. 결론

word-break와 overflow-wrap은 매커니즘은 다르지만,
overflow-wrap이 word-break를 보완하는 역할이라 이해하면 된다.
실제로는 두 가지 조합으로 많이 쓰인다.

경우1 : 평소에는 공백분절로 줄바꿈하되, 공간이 모자랄 땐 음절단위로 자른다.
word-wrap: break-word;
word-break: keep-all;

경우2. 평소에도 음절분절을 하고 공간이 모자랄 때도 특수 문자의 오버플로우를 막는다.
word-wrap: break-word;
word-break: break-all;

필자는 가독성을 위해서 경우1을 많이 쓴다.

'CSS' 카테고리의 다른 글

[CSS] SVG 레이아웃 잡기 (0)	2024.02.28
[CSS] backdrop-filter:blur() 사용 시 주의점 (0)	2024.02.27
[CSS] CSS trick: 배경 그라디언트에 애니메이션 넣기 (0)	2024.02.27
[CSS] BEM - CSS 방법론 (0)	2024.02.27
[css]선택자(selector) 우선순위, 명시도(specificty) (0)	2022.12.27

word-break, overflow-wrap(word-wrap) 정리 - 텍스트 오버플로우 관리법1

1. 목적

2. word-break

value (아래 예시 같이 볼 것)

word-break

:normal

clk-china

clk-korea

non-clk

특수기호

숫자

word-break

:break-all

clk-china

clk-korea

non-clk

특수기호

숫자

word-break

:keep-all

clk-china

clk-korea

non-clk

특수기호

숫자

3. overflow-wrap(word-wrap)

value (아래 예시 같이 볼 것)

word-break

:keep-all

clk-china

clk-korea

non-clk

특수기호

숫자

word-break

:keep-all

overflow-wrap

:break-word

clk-china

clk-korea

non-clk

특수기호

숫자

4. 결론

'CSS' 카테고리의 다른 글

'CSS' Related Articles

티스토리툴바