[TIL] CSS / word-break [ 문자열 단어기준 / 글자기준 줄바꿈 속성 ]

Topic =  한글 문자열 단어 기준 / 글자 기준 줄바꿈 속성 학습하기

 

---

 

 

 

CSS / word-break

[ 속성 설명 ]

word-break 속성은요소 내에서 줄 끝에 도달했을 때 단어가 어떻게 줄바꿈 처리 되는지 지정하는 데 사용된다. 오버프로를 방지하기 위해 브라우저가 분리해야 하는지 여부와 다양한 유형의 언어 및 텍스트 콘텐츠를 처리하는 방법을 제공한다. 

 

 

[ 속성 값 ]

word-break: normal

 

🟨 normal ( 기본값 )

• CJK ( 중국어, 일본어, 한국어 )는 글자 기준으로, CJK 이외의 문자는 공백 또는 하이픈과 같이 허용된 분리점 에서 줄바꿈 처리 한다.

• 영문의 경우 단어 기준으로 줄바꿈 처리가 되지만, 한글은 글자 기준으로 줄바꿈 처리가 되는 모습이다.

 

🟨 break-all

• 컨테이너 너비를 초과하는 경우 단어 분리에 대한 특정 규칙을 고려하지 않고 줄바꿈 처리 된다. [ 글자 기준으로 줄바꿈 처리 ]

• 한글 문자열과 영문 문자열 모두 글자 기준으로 줄바꿈 처리가 된다.

 

🟨 keep-all

• 이 값은 CJK 문자열도 문자열 내에서 각 텍스트 블록을 단일 단어로 처리하여 단어 분리를 방지한다. 단어 기준으로 줄바꿈 처리가 되는 것.

• 한글 문자열과 영문 문자열 모두 단어 기준으로 줄바꿈 처리가 된다

 

 

 

 

 

---

[Reference]

word-break - CSS: Cascading Style Sheets | MDN