Ver Mensaje Individual
  #1 (permalink)  
Antiguo 11/07/2013, 15:05
Mariuch
Invitado
 
Mensajes: n/a
Puntos:
Problema con word-wrap y flotación

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:
Ver original
  1. <div class="grid_5 divThread ">
  2.         <img src="***" alt="" />
  3.     <h3><a href="*****">addaaddddddddd</a></h3>
  4.     <input type="checkbox" value="39" name="check[]" />
  5.     <div class="infoThread">
  6.         <p class="detallesT">Autor <b><a href="****">pruebita</a></b> el 11-07-13 17:02</p>
  7.         <p>Ultimo <b><a href="***">pruebita</a></b> el 11-07-13 17:02</p>
  8.     </div>
  9. </div>

Y el CSS


Código CSS:
Ver original
  1. .divThread{
  2.     background-color: #56A08B;
  3.     margin-bottom: 10px;
  4.     position: relative;
  5.     width: 293px;
  6.     padding-left: 5px;
  7.     box-sizing: border-box;
  8.     -moz-box-sizing: border-box;
  9.     -webkit-box-sizing: border-box;
  10.     min-height: 125px;
  11. }
  12.  
  13. .divThread h3{
  14.     margin-bottom: 30px;
  15.     display: inline-block;
  16.     margin-top: 5px;
  17.     width: 275px;
  18.     white-space: -moz-pre-wrap; /* Mozilla */
  19.     white-space: -hp-pre-wrap; /* HP printers */
  20.     white-space: -o-pre-wrap; /* Opera 7 */
  21.     white-space: -pre-wrap; /* Opera 4-6 */
  22.     white-space: pre-wrap; /* CSS 2.1 */
  23.     white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  24.     word-wrap: break-word; /* IE */
  25. }
  26.  
  27. .infoThread{
  28.     position: absolute;
  29.     bottom: 0px;
  30.     left: 5px;
  31. }
  32.  
  33. .divThread img{
  34.     margin-top: -1px;
  35.     margin-right: 5px;
  36.         float: left;
  37. }

Última edición por pzin; 13/07/2013 a las 08:09 Razón: highlight