Question

I am trying to create a page display on mobile. Its layout like this:

/---------\ 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.

I use floating style to implement that:

<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>

However, if the word is longer than the right area max length but shorter than the whole div, it won’t be break, instead it just be moved below the image.

/---------\ 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

How can I break the word longer than right side and fill the empty area up?

Answer 1

Insert ­ soft-breaks in the long word. There are various PHP libraries that can do that for you, based on dictionaries.