`word-break: break-all` CSS property doesn’t seem to work on span

问题

The following snippet consists of two examples. The first sets the word-break: break-all property on the div, the second sets it on the span.

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

div {
  width: 100px;
}

<div class='break-all'>
  <span>qwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwerty</span>
</div>

<hr>

<div>
  <span class='break-all'>qwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwertyqwerty</span>
</div>

In Firefox, in the first example, the word is broken to fit into the div around it, but in the second example it’s not broken at all. What’s the reason for this?

In Chromium, the word is broken the same way in both examples.

It seems like it works on block elements, but not on inline elements (it was pointed out in the comments that adding display: block to the span results in the word being broken).

来源：https://stackoverflow.com/questions/56465092/word-break-break-all-css-property-doesn-t-seem-to-work-on-span