정의 및 사용 방법

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

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

특징

  • 텍스트를 단어로 구분하여 작성하는 언어와 그렇지 않은 언어가 있습니다.
  • word-break 속성은 이렇게 단어로 구분하는 텍스와 그렇지 않은 텍스트가 텍스트 라인의 끝에 도달했을 때 줄바꿈 규칙을 지정합니다.
  • 특히, CJK(Chinese - Japanese - Korean, 중국어·일본어·한국어)와 비동아시아 언어(non-CJK, 예: 영어) 간의 줄 바꿈 규칙은 관례상 차이가 있으므로, 이 속성으로 그 규칙을 다시 설정할 수 있습니다.

기본 예제

다음 예제에서는 한글과 영어 텍스트에 대해 word-break 속성 값을 설정했을 때, 각각의 언어에서 줄바꿈 처리 방식이 어떻게 달라지는지 확인할 수 있습니다.

HTML 
<p>
    학교종이 땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡땡 어서 모이자.
    선생님이 우리를 기다리신다.
</p>
<p>
    There's a veryveryveryveryveryveryveryveryveryveryveryvery
    longlonglonglonglonglonglonglong-longlonglonglong sentence.
</p>
CSS 
p {
    background-color: gold;
    word-break: /* value */
}
CSS 데모: word-break 데모 버튼을 클릭해 보세요!

값

word-break 속성의 값
normal 초깃값임.
텍스트가 텍스트 라인의 끝에 도달했을 때, 단어를 관례적인 규칙에 따라 줄바꿈합니다. 이 관례는 언어에 따라 다음과 같이 다르게 적용됩니다.
  • 영어에서는 단어 단위로 줄바꿈합니다. 단어 중간에서는 줄바꿈이 일어나지 않으며, 필요 시 하이픈(-, Hyphen) 등을 통해 나눌 수 있습니다.
  • 한국어(한글)에서는 어절(공백 기준)에서 주로 줄을 나누지만, 필요할 경우 글자(한글 음절) 단위로도 줄을 나눌 수 있습니다. 예를 들어, 한 문장이 너무 길어서 줄 끝에서 공백이 없을 경우, 브라우저는 한글 글자 단위로 줄을 자를 수 있습니다.
  • 일본어와 중국어에서는 음절이나 문자 단위로 줄바꿈합니다. 공백이 없는 문자 배열에서도 자유롭게 줄을 나눌 수 있습니다.
break-all 단어가 텍스트 라인의 끝 경계를 오버플로(overflow, 경계를 넘어섬)가 시작하는 정확한 지점에서 단어를 나누어 줄바꿈시킵니다.
keep-all 단어의 중간을 나누어 줄을 바꾸지 않습니다.
즉, 단어의 끝(단어와 단어 사이의 공백)에서만 줄을 바꿉니다. 이 값은 CJK(Chinese - Japanese - Korean, 중국어·일본어·한국어) 텍스트에서만 적용되며, 다른 언어에서는 normal과 동일하게 구현됩니다.
break-word 더 이상 사용되지 않는 값입니다.
과거에 사용되는 값으로 과거와 호환성을 유지하기 위해 권장하지 않지만 지원하고 있습니다. 앞으로는 사용하지 말아야 합니다.
이 값은 word-break: normal과 overflow-wrap: anywhere를 함께 지정한 것과 동일한 효과가 있습니다.

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

형식 구문

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

구문

CSS 
/* 키워드 값 */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* 더 이상 사용되지 않는 값 */

/* 글로벌 값 */
word-break: inherit;
word-break: initial;
word-break: revert;
word-break: revert-layer;
word-break: unset;

형식 정의

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>
CSS 
:lang(ko) {
    word-break: keep-all;
}

코드 부연설명
:lang() 가상 클래스 선택자는
(인간) 콘텐츠 언어를 지정하는 lang 속성의 값이 일치하는 요소를 선택합니다.

위 예제의 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://example.com/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/" target="_blank">
        https://example.com/search?q=css+word-break&newwindow=1&sca_esv=02577cfd3aace2eb&source=hp&ei=3lQtadyIN-Pd1e8PoPyzyAk&iflsig=AOw8s4IAAAAAaS1i7vIdEU9E2wWtsmACszXYOsVPQDzP&oq=css+wor&gs_lp=Egdnd3Mtd2l6Igdjc3Mgd29yKgIIADIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgARIwCNQAFjOEXAAeACQAQCYAb4BoAHWB6oBAzAuN7gBAcgBAPgBAZgCB6AC9QfCAgsQABiABBixAxiDAcICERAuGIAEGLEDGNEDGIMBGMcBwgIEEAAYA8ICCBAAGIAEGLEDwgIHEAAYgAQYCsICCxAuGIAEGLEDGIMBmAMAkgcDMC43oAfyI7IHAzAuN7gH9QfCBwUwLjUuMsgHFg&sclient=gws-wiz
    </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 href="https://example.com/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/" target="_blank">
        https://example.com/search?q=css+word-break&newwindow=1&sca_esv=02577cfd3aace2eb&source=hp&ei=3lQtadyIN-Pd1e8PoPyzyAk&iflsig=AOw8s4IAAAAAaS1i7vIdEU9E2wWtsmACszXYOsVPQDzP&oq=css+wor&gs_lp=Egdnd3Mtd2l6Igdjc3Mgd29yKgIIADIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgAQyBRAAGIAEMgUQABiABDIFEAAYgARIwCNQAFjOEXAAeACQAQCYAb4BoAHWB6oBAzAuN7gBAcgBAPgBAZgCB6AC9QfCAgsQABiABBixAxiDAcICERAuGIAEGLEDGNEDGIMBGMcBwgIEEAAYA8ICCBAAGIAEGLEDwgIHEAAYgAQYCsICCxAuGIAEGLEDGIMBmAMAkgcDMC43oAfyI7IHAzAuN7gH9QfCBwUwLjUuMsgHFg&sclient=gws-wiz
    </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
word-break 속성의 keep-all 값 브라우저 호환성
값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
keep-all 44 12 15 9
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

참고문헌

같이 보기