<div class="value">
  <h1><code>auto</code></h1>
  <p class="auto">私の意見では、私たちは馬鹿の治療法を見つけるのに十分な科学的研究を行うことはめったにありません。</p>
</div>
<div class="value">
  <h1><code>normal</code></h1>
  <p class="normal">私の意見では、<br>私たちは馬鹿の治療法を見つけるのに十分な科学的研究を行うことはめったにありません。</p>
</div>
<div class="value">
  <h1><code>loose</code></h1>
  <p class="loose">私の意見では、<br>私たちは馬鹿の治療法を見つけるのに十分な科学的研究を行うことはめったにありません。</p>
</div>
<div class="value">
  <h1><code>strict</code></h1>
  <p class="strict">私の意見では、<br>私たちは馬鹿の治療法を見つけるのに十分な科学的研究を行うことはめったにありません。</p>
</div>
<div class="value">
  <h1><code>anywhere</code></h1>
  <p class="anywhere">私の意見では、<br>私たちは馬鹿の治療法を見つけるのに十分な科学的研究を行うことはめったにありません。</p>
</div>
<div class="note">
  <ol>
    <li>Японский переведен с английского с помощью <a href="https://translate.google.com/#view=home&op=translate&sl=en&tl=ja&text=In%20my%20opinion%2C%20we%20rarely%20do%20enough%20scientific%20research%20to%20find%20a%20cure%20for%20a%20fool.">Google Translate</a>.</li>
  </ol>
</div>

body {
  padding: 2rem;
}

.value {
  border: 1px solid #333;
  display: inline-block;
  margin-bottom: 1.5rem;
  margin-right: 1.5rem;
  min-height: 160px;
  padding: 1rem;
  vertical-align: top;
  width: 160px;
}
h1 {
  margin-top: 0;
}
p {
  margin: 0;
}

.auto {
  line-break: auto;
}
.normal {
  line-break: normal;
}
.loose {
  line-break: loose;
}
.strict {
  line-break: strict;
}
.anywhere {
  line-break: anywhere;
}

.note {
  background: #fff9c4;
  border-radius: 4px;
  font-size: 0.85rem;
  padding: 0.85rem;
  width: 60%;
  
}
.note ol {
  list-style-type: none;
  padding: 0 0.8rem;
}