Texto dentro de div no se ajusta al ancho

bengiss · #1 (**permalink**) 12/03/2010, 08:41

Hola a todos, tengo un problema relativamente simple pero no encuentro la solucion

Estoy usando css para aplicar un estilo para los comentarios de mi sitio y darles formas de "burbuja", el problema es que el texto dentro del div no se ajusta a su tamaño sino que "sigue de largo", aqui les coloco el codigo que estoy usando:

HTML:

Código HTML:

Ver original<body>
 
<div class="bubble">
    <blockquote>
        <p>Testasdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
    </blockquote>
    <cite>
        <strong>John Smith</strong> on 1st January 2007 at 3:55pm
    </cite>
</div>
    
</body>

CSS:

Código CSS:

Ver originalbody {
    margin: 80px 40px 40px;
    width: 50&#37;;
    background-color: #e6e6e6;
    font: 1em "Lucida Grande", Lucida, Verdana, sans-serif;
}
 
/* Normal Bubble */
div.bubble {
    width: auto;
    font-size: 0.75em;
    margin-bottom: 24px;
}
 
div.bubble blockquote {
    margin: 0px;
    padding: 0px;
    border: 1px solid #c9c2c1;
    background-color: #fff;
    width: inherit;
}
 
div.bubble blockquote p {
    margin: 10px;
    padding: 0px;
    width: inherit;
}
 
div.bubble cite {
    position: relative;
    margin: 0px;
    padding: 7px 0px 0px 15px;
    top: 6px;
    background: transparent url(tip.gif) no-repeat 20px 0;
    font-style: normal;
}

He cambiado el width en todos los elementos de todas las formas que se me ocurren y nada, lo extraño es que en la pagina de ejemplo donde consegui el codigo no tienen este problema y pareciera estar igual ( http://www.willmayo.com/journal/projects/07/bubbles/ )..

Lo peor es que aunque agrege un div simple tampoco se ajusta el texto al tamaño del div:

Ejemplo:

Código HTML:

Ver original<div style="width:200px">
asddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>

Muchas gracias de antemano.

Impostor · #2 (**permalink**) 12/03/2010, 09:29

Prueba con este texto:

Código Texto:

Ver originalLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Y veras como funciona, el problema es que el texto que pones no tiene espacios.

Saludos¡¡

bengiss · #3 (**permalink**) 12/03/2010, 09:49

Jeje gracias, estaba probando con la propiedad word-wrap y me funcionaba pero me parecio extraño que antes no hubiera tenido este problema y jamas habia utilizado word-wrap.

jomaruro · #4 (**permalink**) 13/03/2010, 12:35

Hola:

Una pregunta por curiosidad: ¿Cuantas palabras reales conoces que sean tan grandes como Testasdddddddddddddddddddddddddddddddddddddddddddd dddddddddddddddddddddddddddddddddddddddd?

Saludos.