<h2>overflow-wrap 文章を右端で改行するか</h2>
<div class="overflow-wrap">
  <div class="normal">
    <h3>normal</h3>
    <p>preview for how each css work</p>
    <p>CSSがどのように動作するかのテスト</p>
  </div>
  <div class="break-word">
    <h3>break-word</h3>
    <p>preview for how each css work</p>
    <p>CSSがどのように動作するかのテスト</p>
  </div>
</div>

<h2>word-break 長い単語を改行するか</h2>
<div class="word-break">
  <div class="normal">
    <h3>normal</h3>
    <p>This sentence is preview for how each css work</p>
    <p>この文章は、CSSがどのように動作するかのテストです</p>
    <p>abcdefghijklmnopqrstuvwxyz1234567890</p>
  </div>
  <div class="break-all">
    <h3>break-all</h3>
    <p>This sentence is preview for how each css work</p>
    <p>この文章は、CSSがどのように動作するかのテストです</p>
    <p>abcdefghijklmnopqrstuvwxyz1234567890</p>
  </div>
  <div class="keep-all">
    <h3>keep-all</h3>
    <p>This sentence is preview for how each css work</p>
    <p>この文章は、CSSがどのように動作するかのテストです</p>
    <p>abcdefghijklmnopqrstuvwxyz1234567890</p>
  </div>
  <div class="break-word">
    <h3>break-word</h3>
    <p>This sentence is preview for how each css work</p>
    <p>この文章は、CSSがどのように動作するかのテストです</p>
    <p>abcdefghijklmnopqrstuvwxyz1234567890</p>
  </div>
</div>
.word-break,.overflow-wrap{
  display: flex;
  margin-bottom: 10rem;
}
.word-break div {
  margin: 0 6rem;
  border: red 1px solid;
  width: 200px;
}

.overflow-wrap div {
  margin: 0 6rem;
  border: red 1px solid;
  width: 40px;
}
.overflow-wrap .normal{
  overflow-wrap: normal;
}
.overflow-wrap .break-word{
  overflow-wrap:  break-word;
}
.overflow-wrap .break-spaces{
  overflow-wrap:  break-spaces;
}
.word-break .normal{
  word-break: normal;
}
.word-break .break-all{
  word-break: break-all;
}
.word-break .keep-all{
  word-break: keep-all;
}
.word-break .break-word{
  word-break: break-word;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.