word-break

CSS word-break 속성은 텍스트가 자신의 콘텐츠 박스 밖으로 오버플로 할 때 줄을 바꿀 지 지정합니다.

구문

/* 키워드 값 */
word-break: normal; 
word-break: break-all; 
word-break: keep-all;
word-break: break-word; /* 사용 안함 */ 

/* 전역 값 */
word-break: inherit;
word-break: initial;
word-break: unset;

word-break 속성은 아래의 값 중 하나를 선택해서 지정할 수 있습니다.

normal
기본 줄 바꿈 규칙을 사용합니다.
break-all
오버플로를 방지하기 위해서는 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있습니다. (한중일 텍스트 제외)
keep-all
한중일(CJK) 텍스트에서는 줄을 바꿀 때 단어를 끊지 않습니다. 비 CJK 텍스트에서는 normal과 동일합니다.
break-word
실제 overflow-wrap 속성에 상관하지 않고, word-break: normaloverflow-wrap: anywhere를 설정한 것과 같은 효과를 냅니다.

참고: word-break: break-wordoverflow-wrap: break-word(overflow-wrap 참고)와 달리, word-break: break-all은 텍스트의 오버플로가 시작하는 정확한 지점에서 줄을 바꿉니다. 단어 전체를 다음 줄로 이동하면 중간을 끊지 않아도 될 상황에서도 마찬가지입니다.

형식 정의

초기값normal
적용대상all elements
상속yes
Computed valueas specified
Animation typediscrete

형식 구문

normal | break-all | keep-all | break-word

예제

HTML

<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">This is a long and
 Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">This is a long and
 Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>

<p>3. <code>word-break: keep-all</code></p>
<p class="keepAll narrow">This is a long and
 Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>

<p>4. <code>word-break: break-word</code></p> 
<p class="breakWord narrow">This is a long and 
  Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</p>

CSS

.narrow {
  padding: 5px;
  border: 1px solid;
  display: table;
  max-width: 100%;
}

.normal {
  word-break: normal;
}

.breakAll {
  word-break: break-all;
}

.keepAll {
  word-break: keep-all;
}

.breakWord { 
  word-break: break-word; 
} 

명세

Specification Status Comment
CSS Text Module Level 3
The definition of 'word-break' in that specification.
Working Draft Initial definition

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
word-breakChrome Full support 1Edge Full support 12Firefox Full support 15IE Full support 5.5
Notes
Full support 5.5
Notes
Notes No version of Internet Explorer supports the initial value.
Full support 8
Prefixed Notes
Prefixed Implemented with the vendor prefix: -ms-
Notes Don't use -ms-word-break, which is a synonym for word-break.
Opera Full support 15Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 15Opera Android Full support 14Safari iOS Full support 2Samsung Internet Android Full support 1.0
break-wordChrome Full support 1Edge Full support 79Firefox Full support 67IE No support NoOpera Full support 15Safari Full support 3WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 67Opera Android Full support 14Safari iOS Full support 2Samsung Internet Android Full support 1.0
keep-allChrome Full support 44Edge Full support 12Firefox Full support 15IE Full support 5.5Opera Full support 31Safari Full support 9WebView Android Full support 44Chrome Android Full support 44Firefox Android Full support 15Opera Android Full support 32Safari iOS Full support 9Samsung Internet Android Full support 4.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

같이 보기