Our volunteers haven't translated this article into 한국어 yet. Join us and help get the job done!
You can also read the article in English (US).

The word-break CSS property specifies whether or not the browser should insert line breaks wherever the text would otherwise overflow its content box.

Note: In contrast to overflow-wrap, word-break will create a break at the exact place where text would otherwise overflow its container (even if putting an entire word on its own line would negate the need for a break).

Syntax

/* Keyword values */
word-break: normal; 
word-break: break-all; 
word-break: keep-all;

/* Global values */
word-break: inherit;
word-break: initial;
word-break: unset;

The word-break property is specified as a single keyword chosen from the list of values below.

Values

normal
Use the default line break rule.
break-all
To prevent overflow, word breaks should be inserted between any two characters (excluding Chinese/Japanese/Korean text).
keep-all
Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as for normal.

Formal syntax

normal | break-all | keep-all

Examples

HTML

<p>1. <code>word-break: normal</code></p>
<p class="normal narrow">This is a long and
  Supercalifragilisticexpialidocious sentence.
  次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p> 

<p>2. <code>word-break: break-all</code></p>
<p class="breakAll narrow">This is a long and
  Supercalifragilisticexpialidocious sentence.
  次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p> 

<p>3. <code>word-break: keep-all</code></p>
<p class="keep narrow">This is a long and
  Supercalifragilisticexpialidocious sentence.
  次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>

CSS

.narrow {
  padding: 5px;
  border: 1px solid;
  width: 8em;
}

.normal {
  word-break: normal;
}

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

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

Specifications

Specification Status Comment
CSS Text Module Level 3
The definition of 'word-break' in that specification.
Working Draft Initial definition
Initial valuenormal
Applies toall elements
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes15

5.51

8 -ms- 2

15 Yes
keep-all44 No155.5319
break-word Yes Yes ? ? Yes Yes
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes18 Yes15 No ? ?
keep-all Yes Yes No15 No9 ?
break-word Yes Yes Yes ? Yes Yes ?

1. No version of Internet Explorer supports the initial value.

2. Don't use -ms-word-break, which is a synonym for word-break.

See also

문서 태그 및 공헌자

 최종 변경: fscholz,