줄바꿈을 단어 기준으로 할지, 글자 기준으로 할지 정하기 - word-break
word-break
word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는
속성입니다.
기본형
word-break : normal | break-all | keep-all
normal : CJK 문자는 글자 기준으로, CJK 이외의 문자는 단어 기준으로
줄바꿈합니다.
- break-all : 글자 기준으로 줄바꿈합니다.
- keep-all : 단어 기준으로 줄바꿈합니다.
예제
긴 단어가 있는 영어 문장
속성값이 normal일 때와 keep-all일 때의 결과가 같습니다.
data-default-tab="result"
data-preview="true"
data-editable="true"
data-height="700"
data-pen-title="CSS word-break 영어 줄바꿈 예제"
data-slug-hash="pobEMWa"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 700px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
긴 단어가 있는 한글 문장
속성값이 normal일 때와 break-all일 때의 결과가 같습니다.
data-default-tab="result"
data-preview="true"
data-editable="true"
data-height="720"
data-pen-title="CSS word-break 한국어 줄바꿈 예제"
data-slug-hash="yLJampj"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 720px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
가로 화면의 크기가 작은 모바일의 경우를 대비해서 속성값을
word-break: break-all;로 정하는 것이 가장 좋습니다.