word-break 속성의 이해

word-break 속성은
텍스트가 텍스트 박스의 끝에 도달했을 때 해당 텍스트의 단어(word)를 어떻게 줄바꿈할지(break) 지정합니다.

이 속성은 텍스트의 가독성을 향상시키기 위해 매우 중요한 역할을 합니다.

CSS 데모: object-position 데모 버튼을 클릭해 보세요!

값

word-break 속성의 값
normal 초깃값임.
텍스트가 콘텐츠 박스의 끝에 도달했을 때, 단어를 관례적인 규칙에 따라 줄바꿈합니다. 이 관례는 언어에 따라 달라질 수 있습니다.
break-all 단어가 콘텐츠 박스의 끝 경계를 오버플로(overflow, 경계를 넘어섬)가 시작하는 정확한 지점에서 단어를 나누어 줄바꿈시킵니다.
keep-all 단어의 중간을 나누어 줄을 바꾸지 않습니다.
즉, 단어의 끝에서만 줄을 바꿉니다. 이 값은 CJK(중국어, 일본어, 한국어) 텍스트에서만 적용되며, 다른 언어에서는 normal과 동일하게 구현됩니다.
break-word 더 이상 사용되지 않는 값입니다.
과거에 사용되는 값으로 과거와 호환성을 유지하기 위해 권장하지 않지만 지원하고 있습니다. 앞으로는 사용하지 말아야 합니다.
이 값은 word-break: normal과 overflow-wrap: anywhere를 함께 지정한 것과 동일한 효과가 있습니다.

알아두세요!
텍스트가 콘텐츠 박스의 끝에 도달했을 때, 단어에 하이픈(-, Hyphen)이 포함되어 있으면 word-break 속성의 값에 상관없이 하이픈에서 단어를 나누어 줄바꿈시킵니다. 이는 이전부터 내려오는 관례적인 규칙을 CSS에서 따르는 것입니다.

형식 구문

CSS 
selector {
    word-break: /* value */
}

형식 정의

word-break 속성의 형식 정의
초깃값 normal
적용대상 모든 요소
상속 예

한국어(한글) 사용 시 고려할 점

word-break 속성은 텍스트의 가독성을 향상시키기 위해 매우 중요한 역할을 합니다. 이 속성의 초깃값인 normal 값은 언어에 따라 구현 방식이 달라질 수 있어서, 주로 한국어와 영어를 같이 사용하는 우리나라의 웹사이트 제작 시 고려해야 할 사항이 몇 가지 있습니다.

한글은 영어와 달리 음절 단위로 끊어 읽는 언어입니다.
이는 가독성 측면에서 사용자들이 텍스트를 읽을 때 고려할 만한 충분한 가치가 있습니다.

특히, 언론사 뉴스, 제품의 설명서, 기술 문서, 커뮤니티의 글 등은 텍스트의 디자인적은 측면보다는 정보 전달을 위한 가독성이 중요할 것입니다.

word-break: keep-all; 사용하기

한글에서 가독성을 고려한다면 word-break 속성의 값을 keep-all로 설정하는 것이 좋습니다.

word-break: keep-all;은 단어의 중간을 나누어 줄을 바꾸지 않습니다. 즉, 단어의 끝에서만 줄을 바꾸기 때문에 음절 단위로 끊어 읽는 한글에서는 단어의 중간에 줄이 바뀌지 않으므로, 텍스트 읽기 더 쉽게 할 수 있습니다.

다음은 기본 언어가 한글로 된 웹사이트 word-break 속성의 값을 keep-all로 설정하는 예제입니다.

HTML 
<!DOCTYPE html>
<html lang="ko"> <!-- html 태그에 lang 속성으로 페이지의 기본 언어 지정 -->
    <head>
        <meta charset="UTF-8">
        <title>한글에서 word-break 설정하기</title>
    </head>
    <body>
        <h1>한글에서 word-break 설정하기</h1>
        <p>
            한글에서 가독성을 고려한다면
            <br>
            word-break 속성의 값을 keep-all로 설정하는 것이 좋습니다.
        </p>
    </body>
</html>
HTML lang 속성 - 올바른 이해와 사용 방법
CSS 
:lang(ko) {
    word-break: keep-all;
}

위 예제의 CSS 코드에서는 :lang(ko) 가상 클래스 선택자를 사용해서 lang 속성의 값이 ko 즉, 한국어인 경우에 word-break 속성의 값을 keep-all로 설정하는 방법을 보여주고 있습니다.

물론, 가독성 측면 보다는 디자인적인 측면에서, 특히 텍스트가 콘텐츠 박스의 좌우 끝에 일치하는 것이 중요하다면 word-break: break-all;로 설정하세요.

word-break: keep-all; 사용 시 주의할 점

한글에서 word-break: keep-all;을 설정하면 가독성 측면에서 좋지만, 예기치 않은 문제가 발생할 수 있습니다.

예를 들어, 콘텐츠의 블록의 너비가 작거나, 화면이 너비가 작은 모바일 디바이스 등에서 url 주소를 나타내야 하는 경우가 종종 있습니다. 다음의 코드 예제로 살펴보겠습니다.

HTML 
<div class="container">
    <a href="https://codingeverybody.kr/css-word-break-%ec%86%8d%ec%84%b1-%ec%98%ac%eb%b0%94%eb%a5%b8-%ec%9d%b4%ed%95%b4%ec%99%80-%ec%82%ac%ec%9a%a9-%eb%b0%a9%eb%b2%95/">
        https://codingeverybody.kr/css-word-break-%ec%86%8d%ec%84%b1-%ec%98%ac%eb%b0%94%eb%a5%b8-%ec%9d%b4%ed%95%b4%ec%99%80-%ec%82%ac%ec%9a%a9-%eb%b0%a9%eb%b2%95/
    </a>
</div>
CSS 
:lang(ko) {
    word-break: keep-all;
}
.container {
    width: 240px;
    padding: 1em;
    background-color: gold;
}
브라우저에서 실제 표시된 모습

브라우저에서 실제 표시된 모습을 보면 url 주소가 콘텐츠의 블록을 오버플로(overflow, 경계를 넘어섬)하게 됩니다. 이런 예기치 않는 문제가 발생하게 되는 것입니다. 이런 url 주소나 오버플로할 수 있는 콘텐츠에는 다음과 같은 설정이 필요할 것입니다. 이전의 코드 예제를 수정한 다음의 코드 예제로 살펴보겠습니다.

HTML 
<div class="container">
    <a class="word-break-break-all" href="https://codingeverybody.kr/css-word-break-%ec%86%8d%ec%84%b1-%ec%98%ac%eb%b0%94%eb%a5%b8-%ec%9d%b4%ed%95%b4%ec%99%80-%ec%82%ac%ec%9a%a9-%eb%b0%a9%eb%b2%95/">
        https://codingeverybody.kr/css-word-break-%ec%86%8d%ec%84%b1-%ec%98%ac%eb%b0%94%eb%a5%b8-%ec%9d%b4%ed%95%b4%ec%99%80-%ec%82%ac%ec%9a%a9-%eb%b0%a9%eb%b2%95/
    </a>
</div>
CSS 
:lang(ko) {
    word-break: keep-all;
}
:lang(ko) .word-break-break-all {
    word-break: break-all; /* 추가 작업이 필요합니다. */
}
.container {
    width: 240px;
    padding: 1em;
    background-color: gold;
}
브라우저에서 실제 표시된 모습

이렇게 한글에서 word-break: keep-all;을 설정하면 가독성 측면에서 좋지만, 예기치 않은 문제가 발생할 수 있는 콘텐츠는 url 주소 이외에도 너비가 좁은 테이블 셀에서의 긴 글자를 사용할 때에도 발생할 수 있습니다.

word-break: keep-all;은 언급한 바와 같이 오버플로하는 콘텐츠가 있는지 확인해야 하는 번거로움이 있습니다. 하지만, 번거롭다 하더라도 사용자의 웹 접근성과 UX 등을 고려해야 하는 것이 개발자의 숙명입니다.

브라우저 호환성

word-break 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
word-break 1 12 15 3

caniuse.com에서 더 자세한 정보를 확인해 보세요.

word-break 속성의 keep-all 값 브라우저 호환성
값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
keep-all 44 12 15 9

caniuse.com에서 더 자세한 정보를 확인해 보세요.

word-break 속성의 break-word 값 브라우저 호환성
값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
break-word 1 79 67 3

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

word-break 속서의 명세서 사양
명세서 사양
word-break CSS Text Module Level 3
#word-break-property

참고문헌

같이 보기