[CSS] word-wrap, word-break 정확하게 알아보기

[CSS] word-wrap, word-break 정확하게 알아보기

 

css word-break word-wrap 알아보기

---

 

오늘은 CSS의 word-wrap 과 word-break 속성에 대해 알아보겠습니다.

항상 그렇듯이 해당 속성을 알아보기 전에,

먼저 왜 이 속성들이 필요한 지부터 이해가 필요합니다.

// 영문
<div>
    https://plus.google.com/+googlekorea#+googlekorea/

    Lorem Ipsum is simply dummy text of the
    printing and typesetting industry. Lorem
    Ipsum has been the industry's standard
    dummy text ever since the 1500s.
</div>

// 한글
<div>
    나랏말싸미중귁에달아문자와로로서로삼았디디아니할세이런전차로어린백셩이 
    
    니르고져 홀베이셔도 마참네 제 뜨들 시러펴디
    몯할 노미하니아 내 이랄 윙하야 어엿비너겨
    새로 스믈 여들 짜랄 맹가노니 사람마다 해여
</div>

 

특정 영역 안에 한글, 영문의 긴 텍스트를 적어보았습니다.

 

위 그림과 같이 렌더링 됩니다.

예상과 다른 부분은, 한글과 다르게 영문은 첫째줄에 url 부분이 개행되지 않고

영역을 초과한다는 점입니다.

 

즉, 한글과 영어가 다른 규칙으로 렌더링 된다는 것을 알 수 있습니다.

 

- 영문: 단어(공백 없이 연속된 글자)를 기준으로 개행 → 단어가 영역을 초과한다면 개행되지 않음
- 한글: 단어, 글자 구분 없이 강제 개행

 

언어마다 단어의 기준, 줄바꿈을 설정할 때 쓰는 속성이

word-wrap 과 word-break 입니다.

---

word-wrap

'비' 아시아 언어의 줄 바꿈을 제어합니다.

아시아 언어는 China, Japanese, Korean → 줄여서 CJK 를 의미합니다

 

속성의 종류

- normal: 기본값
- break-word: 글자가 길어지면 강제로 끊어서 줄 바꿈 처리 → 단어의 기준을 글자로 바꿈

 

예제

아랫줄에 한글은 CJK 언어이기 때문에 word-wrap 속성이 적용되지 않습니다.
word-break 속성을 이용해야 합니다.

 

word-break

아시아, 비아시아 언어의 줄 바꿈을 모두 제어

속성의 종류

- normal: 기본값 / CJK 문자는 글자 기준, 비 CJK 문자는 단어 기준으로 줄 바꿈
- break-all : 글자 기준으로 줄 바꿈
- keep-all : 단어 기준으로 줄 바꿈

예제

 

가끔씩 url 텍스트가 들어갈 경우 개행되지 않기 때문에 UI가 깨진 것 같은 현상이 종종 발생합니다.
이럴 경우 다음과 같이 해결할 수 있습니다.

 

- 영어 + 한글 데이터가 들어갈 수 있는 경우 word-break: break-all
- 영어만 들어간다면 word-wrap: break-word

 

 

글이 도움이 되셨다면 공감&댓글 부탁드립니다.
글 작성에 큰 힘이 됩니다. 🙂