romper la palabra larga alrededor de la imagen flotante

Question

Estoy intentando crear una visualización de página en el móvil. Su trazado como esto:

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

utilizo estilo flotante para poner en práctica lo siguiente:

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

Sin embargo, si la palabra es más larga que la longitud derecho del área max pero más corta que todo el div, que ganó' No se rompa, sino que simplemente se mueve debajo de la imagen.

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

¿Cómo puedo romper la palabra más larga que la derecha y llenar el área vacía?

Answer 1

Insertar ­ suaves-breaks en la palabra larga. Existen varias bibliotecas de PHP que pueden hacer eso por usted, según los diccionarios.

Answer 2

podría usar PHP para preparar el bloque de texto, acortando palabras largas con algo como ...

$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

Puede rociar <wbr> etiquetas en la palabra larga. El navegador los usará para romper cuando sea necesario. Si no es necesario, no se romperá allí. Aquí está su ejemplo de jsfiddle corregido: http://jsfiddle.net/vAdPy/

Tenga en cuenta que cuanto más cerca estén las etiquetas <wbr> entre sí, mejores resultados obtendrá ya que el navegador tiene más opciones para encontrar un lugar adecuado para romper la palabra larga.

Aquí hay un script PHP para rociar las etiquetas <wbr> en el texto.

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

Esto inserta una etiqueta <wbr> después de cada dos caracteres (tenga en cuenta que los dos puntos en la expresión regular) del largo texto. Puede modificar la cantidad de puntos en la expresión regular para controlar cuán lejos deben estar dos etiquetas <wbr> consecutivas.

Answer 4

Para mí esta solución era la mejor (con palabras largas y flotar elementos):

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

Sólo hay problemas en Chrome.