浮動小数点で長い単語を区切ります

Question

私はモバイルでページ表示を作成しようとしています。

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

どのように単語を右側より長くして空の領域を埋めることができますか？

Answer 1

はロングワードで­ソフト改行を挿入...何かのように長い単語を短縮、テキストブロックを準備をするためにPHPを使用することができます。辞書をベースにして、さまざまなPHPライブラリが用意されています。

Answer 2

は

$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

長い単語に<wbr>タグを振りかけることができます。ブラウザは必要に応じていつでも中断するためにそれらを使用します。必要がない場合は、そこに壊れません。あなたのjsfiddleの例は固定されています：http://jsfiddle.net/vAdPy/

<wbr>タグが互いに近いほど、ブラウザには長い単語を壊すのに適した場所を見つけるための選択肢が増えるので、より良い結果が得られます。

ここには、<wbr>タグをテキストに振りかけるPHPスクリプトがあります。

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

これは、長いテキストのすべての2つの文字（正規表現で2点を注意してください）した後<wbr>タグを挿入します。正規表現のドット数を変更して、2つの連続したタグがどれだけ離れているかを制御することができます。

Answer 4

私にとって、このソリューションは、（長い単語やフロート要素を持つ）最高でした：

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

Chromeでのみ問題があります。