Using word-wrap: break-word on two consecutive long words

Question

When using word-wrap: break-word on a div with two consecutive long words, the second word that is broken off starts on a new line, as such:

IAmALongW
ord
IAmAlsoAL
longword

Is there any way to prevent this in css, to get the following?

IAmALongW
ord IAmAl
soALongwo
rd

Without reverting to word-break: break-all, of course.

Answer 1

.container{
  width: 100px;
  display: inline-block;
  border: 1px solid black;
  word-wrap: break-word;
  white-space: pre;
}

<div class="container">
  <p>thisisaverylongword anotherverylongword</p>
</div>