break long word around floating image

问题

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?

回答1:

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

回答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);

回答3:

You can sprinkle  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  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  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  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  tags should be.

回答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.

来源：https://stackoverflow.com/questions/6855979/break-long-word-around-floating-image

标签

css

css-float

word-wrap