[CSS] 줄바꿈 word-break 속성

줄바꿈 word-break 속성

 

1. word-break: normal(default)

이 글은 영어와 한글이 같이 있는 글입니다. 이 글은 영어와 한글이 같이 있는 글입니다. I'm Copymaster. I'm Copymaster. I'm Copymaster. I'm Copymaster.

영어는 단어를 기준으로 줄바꿈이 이뤄지지만, 한글은 글자를 기준으로 줄바꿈이 이뤄집니다.

한글 뿐만 아니라 중국어, 일본어도 글자를 기준으로 줄바꿈이 이뤄집니다. 

 

영어는 아직 줄이 다 차지 않아도 다음 단어가 길어서 해당 줄을 넘어서는 상황이라면 줄바꿈을 해버리지만, 중국어, 일본어, 한글(줄여서 CJK 라고 부름)은 단어를 중간에 끊는 일이 있더라도 줄을 거의 다 채운 후에 줄바꿈을 합니다. 

 

2. word-break: keep-all

이 글은 영어와 한글이 같이 있는 글입니다. 이 글은 영어와 한글이 같이 있는 글입니다. I'm Copymaster. I'm Copymaster. I'm Copymaster. I'm Copymaster.

한글도 영어와 마찬가지로 단어를 기준으로 줄바꿈이 되었습니다. 

 

3. word-break: break-all

이 글은 영어와 한글이 같이 있는 글입니다. 이 글은 영어와 한글이 같이 있는 글입니다. I'm Copymaster. I'm Copymaster. I'm Copymaster. I'm Copymaster.

영어도 한글과 마찬가지로 중간에 단어가 끊기고 줄바꿈이 된 것을 확인하실 수 있습니다. 

 

 

---

 

출처: [css] 단어를 기준으로 줄바꿈 하려면? word-break:keep-all