Relawan kami belum menerjemahkan artikel ini ke dalam Bahasa Indonesia. Bergabunglah dan bantu kami menyelesaikan pekerjaan ini!
Anda juga bisa membaca artikel dalam 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.

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

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

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).

Initial valuenormal
Applies toall elements
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

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

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 (Yes) 15.0 (15.0) 5.5[1,3] 15 (Yes)
keep-all 44 No support 15.0 (15.0) 5.5 31 9
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) 18.0 (Yes) 15.0 (15.0) ? No support ?
keep-all No support[2] No support[2] No support 15.0 (15.0) ? No support 9

[1] IE8 introduced -ms-word-break as a synonym for word-break. Don't use the -ms- prefix.

[2] See WebKit bug 123782.

[3] Note that no version of Internet Explorer supports the initial value.

[4] Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value which is treated like word-wrap: break-word.

See also

Tag Dokumen dan Kontributor

 Terakhir diperbarui oleh: mfluehr,