Break a long word around a floating image

Question

I am trying to create a page display on a mobile device. Its location is as follows:

/---------\ 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 a floating style to implement this:

 <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 maximum length, but shorter than the entire div, it will not be broken, instead it will 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 a word longer than the right and fill an empty area?

Answer 1

Insert ­ soft tears in a long word. There are various PHP libraries that can do this for you based on dictionaries.

Answer 2

You can use PHP to prepare a text block, shorten 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 color the <wbr> tags in a long word. The browser will use them to break when necessary. If it is not necessary, it will not break. Here is an example of your jsfiddle fixed: http://jsfiddle.net/vAdPy/

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

Here is a PHP script to color the <wbr> tags in 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" ?> 

Inserts the <wbr> after each two characters (note the two dots in the regular expression) of the long text. You can change the number of dots in a regular expression to control the distance between two consecutive <wbr> tags.

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.