[SOLUCIONADO] Problema con word-wrap y flotación

[Mariuch]

Hola amigos, cómo están? Les cuento que estoy hace varios días luchando con este problema y no lo puedo solucionar.

Tengo un div, que contiene a su izquierda una imagen flotada en esa dirección; y luego un texto que fluye alrededor de la imagen como en cualquier publicación común. El tema es que descubrí que si me ponen un texto larguísimo como por ejemplo: "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aa" sin ningún espacio, el mismo excedería los límites de mi div y se vería muy feo. Lo primero que se me ocurrió es usar la función wordwrap de PHP, pero corta todos las cadenas de texto, y no sólo las que son sin tabulaciones, así que no me sirvió.

Después de mucho investigar, encontré que CSS tiene también la propiedad wordwrap, y la apliqué con bastante éxito. Las palabras se cortan donde deben cortarse y no se me rompe la maquetación.

El problema surge porque pierdo el fluir del texto alrededor de la imagen. Me queda la foto, y el texto a su lado; pero una vez terminada la imagen, el texto no fluye bajo ella, sino que sigue respetando el margen de la foto. Y no es para nada lo que tengo en mente en esta página.

Sé que hay varios temas de esto, pero no encontré ninguno que resolviera mi consulta. En muchos lugares aconsejaron hacer un display:inline-block, que ya intenté sin éxito.

Si alguien pudiera darme alguna indicación la agradecería con creces. Adjunto acá una copia del código para que vean de qué estoy hablando. Muchas gracias!!!

Código HTML:

<div class="grid_5 divThread ">
        <img src="***" alt="" />
    <h3><a href="*****">addaaddddddddd</a></h3>
    <input type="checkbox" value="39" name="check[]" />
    <div class="infoThread">
        <p class="detallesT">Autor <b><a href="****">pruebita</a></b> el 11-07-13 17:02</p>
        <p>Ultimo <b><a href="***">pruebita</a></b> el 11-07-13 17:02</p>
    </div>
</div>
 

Y el CSS

Código CSS:

.divThread{
    background-color: #56A08B;
    margin-bottom: 10px;
    position: relative;
    width: 293px;
    padding-left: 5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    min-height: 125px;
}
 
.divThread h3{
    margin-bottom: 30px;
    display: inline-block;
    margin-top: 5px;
    width: 275px;
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap; /* HP printers */
    white-space: -o-pre-wrap; /* Opera 7 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: pre-wrap; /* CSS 2.1 */
    white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
    word-wrap: break-word; /* IE */
}
 
.infoThread{
    position: absolute;
    bottom: 0px;
    left: 5px;
}
 
.divThread img{
    margin-top: -1px;
    margin-right: 5px;
        float: left;
}
 

[Mariuch]

Nadie?? Acepto sugerencias de otras formas de cortar las palabras! No necesariamente tiene que ser usando mi CSS. Si alguien conoce una forma mejor encantada! Por favor ayuda, estoy desesperada :/

[pzin]

Si le pones un ancho fijo y lo flotas debería de funcionar:

Código CSS:

.divThread h3 {
  float: left;
  width: 200px;
  word-break: break-all;
}
 

Intenta usar highlight o code cuando publiques código.

[Mariuch]

Gracias por tu respuesta. Está buena la idea... el tema es que si tengo una palabra que queda al medio y no es larga, también la corta.

Por ejemplo tengo un título que dice "Secretos del Shea Stadium" que ahora queda como "Secretos del Shea Sta
dium".
Y no está bueno que parta así las palabras. Tenés alguna otra idea?

Gracias!