break long word around floating image

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.

Answer 2

Could use PHP to prep the text block, shortening long words with something like ...

    $words = explode(' ',$str);
    foreach ($words as $word) {
        if (strlen($word) > 20) {
            $part1 = substr($word,0,20);
            $part2 = substr($word,21);
            $newwords[] = $part1 .' '. $part2;
        } else {
            $newwords[] = $word;
        }
    }
    $newstr = implode(' ',$newwords);

Answer 3

You can sprinkle <wbr> tags in the long word. The browser will use them to break whenever it is needs to. If not needed, it won't break there. Here is your jsfiddle example fixed: http://jsfiddle.net/vAdPy/

Note that the closer are the <wbr> tags to each other, the better results you get as the browser has more options to find a suitable place to break the long word.

Here is a PHP script to sprinkle <wbr> tags into the text.

<?php
    $word = 'thisisaverylongword';
    $wbr_word = preg_replace('/(..)/', '\\1<wbr>', $word);

    // $wbr_word is now "th<wbr>is<wbr>is<wbr>av<wbr>er<wbr>yl<wbr>on<wbr>gw<wbr>or<wbr>d"
?>

This inserts a <wbr> tag after every two characters (note the two dots in the regex) of the long-text. You can alter the number of dots in the regex to control how far apart two consecutive <wbr> tags should be.

Answer 4

For me this solution was the best (with long words and float elements):

    -ms-word-break: break-all;
     word-break: break-all;
     word-break: break-word;
     -webkit-hyphens: auto;
     -moz-hyphens: auto;
     hyphens: auto;

http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/

There are only problems in Chrome.