Examples

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break -->

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

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

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

<div>
<p>4. <code>word-break: break-word</code></p> 
<div class="breakWord narrow">This is a long and 
  Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu 
  次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</div>
</div>
  
<div>
<p>6. <code>overflow-wrap: break-word;</code></p> 
<div class="overflowWrapBreakWord narrow">This is a long and 
  Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu 
  次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</div>
</div>

CSS

body {
  position: relative;
  box-sizing: border-box;
  max-width: 300px;
}

body > div {
  display: block;
  box-sizing: border-box;
}

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

.normal {
  word-break: normal;
}

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

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

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

.overflowWrapBreakWord {
  overflow-wrap: break-word;
}