<main>
  <article>
    <small>无效果,等效于<br />word-break: normal;<br>和overflow-wrap: normal;</small>
    <div>
      Most words are short & don't need to break. But Antidisestablishmentarianism is long. The width is set to min-content, with a max-width of 11em. <br />这句话很长很长很长很长很长很长很长很长很长很长很长很长。</div>
  </article>

  <article>
    <small>overflow-wrap: anywhere;</small>
    <div style="overflow-wrap:anywhere">
      Most words are short & don't need to break. But Antidisestablishmentarianism is long. The width is set to min-content, with a max-width of 11em. <br />这句话很长很长很长很长很长很长很长很长很长很长很长很长。</div>
    </div>
  </article>

  <article>
    <small>overflow-wrap: break-word;</small>
    <div style="overflow-wrap:break-word">
      Most words are short & don't need to break. But Antidisestablishmentarianism is long. The width is set to min-content, with a max-width of 11em. <br />这句话很长很长很长很长很长很长很长很长很长很长很长很长。</div>
    </div>

  </article>

  <article>
    <small>word-break:break-word</small>
    <div style="word-break:break-word">
      Most words are short & don't need to break. But Antidisestablishmentarianism is long. The width is set to min-content, with a max-width of 11em. <br />这句话很长很长很长很长很长很长很长很长很长很长很长很长。</div>
    </div>
  </article>

  <article>
    <small>word-break:break-all</small>
    <div style="word-break:break-all">
      Most words are short & don't need to break. But Antidisestablishmentarianism is long. The width is set to min-content, with a max-width of 11em. <br />这句话很长很长很长很长很长很长很长很长很长很长很长很长。</div>
    </p>
  </article>

  <article>
    <small>word-break:keep-all<br />汉语下才有区别</small>
    <div style="word-break:keep-all">
      Most words are short & don't need to break. But Antidisestablishmentarianism is long. The width is set to min-content, with a max-width of 11em. <br />这句话很长很长很长很长很长很长很长很长很长很长很长很长。</p>
  </article>

</main>
* {
  box-sizing: border-box;
}
div {
  /* width: min-content; */
  max-width: 11em;
  margin: 1px;
  padding: 0.75em;
  border: 1px solid grey;
}

main {
  display: flex;
  flex-wrap: wrap;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.