разрыв длинного слова вокруг плавающего изображения

Я пытаюсь создать отображение страницы на мобильном устройстве. Его макет выглядит следующим образом:

/---------\ some text around 
|         | the image. some
|  image  | text around the
|         | image. some text
\---------/ around the image.
some word around the image.
some word around the image.

Я использую плавающий стиль, чтобы реализовать это:

<div style="word-wrap: break-word; word-break: break-all;">
  <img src="someimg.jpg" style="float: left;"/>
  some text around the image. some text around the image. ...
</div>

Однако, если слово длиннее, чем максимальная длина правой области, но короче, чем весь div, оно не будет прервано, вместо этого оно будет просто перемещен под изображением.

/---------\ some text around 
|         | the image.
|  image  | 
|         | 
\---------/ 
a-word-longer-than-right will
not be break and just display
below the image while a-word-
longer-than-the-whole-area-wi
ll-be-break-into-next-line

Как я могу разбить слово длиннее правой стороны и заполнить пустую область вверх?