[TIL] 2023.06.07 word-break로 문자열 줄바꿈하기

table body에 띄어쓰기 없이 영어로 텍스트를 입력했을 때 줄 바꿈이 되지 않고 테이블 레이아웃이 깨지면서 가로 스크롤이 생기는 문제가 발생했다.

 

테스트 삼아 일반적인 영어 텍스트를 작성했을 때는 아무 문제없는 것을 알아냈다. 그래서 띄어쓰기 없이 작성한 것이 문제인가 싶어서 관련 키워드로 검색을 해봤다.

 

word-break: break-all;

이것저것 검색해 보다가 알게된 것이 css word-wrap 속성. word-wrap: break-all을 적용했더니 내가 원하는 대로 띄어쓰기 없이 글을 작성했을 때에도 줄 바꿈이 잘 되는 것을 확인할 수 있다.

 

+) 근데 `word-break: break-all` 속성을 지정했더니 단어가 깨지면서 개행되는 문제가 있었다. 나는 테스트 용으로 띄어쓰기 없이 문자를 길게 작성했던 거고 보통의 경우에는 요청사항 적을 때 띄어쓰기 잘 지키면서 글을 작성할 거 같다는 생각에 `word-break` 속성을 CSS에서 삭제해 버렸다.

 

 

---

 

영문과 한글은 각기 다른 개행 기준을 가지고 있는데 이 때문에 발생했던 문제인 거 같다.

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

 

언어마다 단어의 기준, 줄 바꿈을 설정하고 싶을 때는 word-wrap과 word-break 속성을 사용한다.

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

 

---

참고 문서

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