Mi div de 500px se le agrega texto y lo traspasa, y el bottom auto no funciona

[novatoide]

Hola amig@s!

Tengo un problema con un div donde va alojado el texto que se ingresa por los usuarios, por ejemplo si se insertan caracteres así “aaaaaaaaaaaaaaaaaaaaaaaaaaaa” traspasa el div, como esta en la imagen señalado con naranja.



Si pueden ver también, las flechas rojas en la img. son por que el margin-bottom no me funciona es decir, si lo dejo en auto y por ejemplo pongo muchos <br> o más de X caracteres se agranda el height pero por encima del otro cuadro de texto (posts), este es el código.

Código CSS:

#posts
{
 
    margin:10px;
    width:500px;
    height:30px;
    background:olive;
    border-radius:3px;
    padding:3px;
    float:left;
    font-size:26px;
    margin-bottom:170px;
}
#posts p
{
    margin:7px;
    width:auto;
    max-width:500px;
    padding:3px;
    background:rgb(220,255,230);
    border-radius:3px;
    font-family:Vera;
    font-size:14px;
}
 

Ojala me puedan dar una mano! gracias!!! :D

[anavega]

Toma en cuenta que es muy poco probable que existe una palabra de tal longitud

"aaaaaaaaaaaaaaaaaaaaaaaaaaaa"

Y si ponen algo como eso en un comentario, considero yo que debe ser eliminado inmediatamente por el administrador del sitio web.

De todo modos puedes utilizar la propiedad overflow: hidden a tu div de 500 px.

Código HTML:

#posts
{
    overflow: hidden; 
    margin:10px;
    width:500px;
    height:30px;
    background:olive;
    border-radius:3px;
    padding:3px;
    float:left;
    font-size:26px;
    margin-bottom:170px;
}

Espero te sirva de ayuda.

Saludos

[novatoide]

Iniciado por anavega

Toma en cuenta que es muy poco probable que existe una palabra de tal longitud

"aaaaaaaaaaaaaaaaaaaaaaaaaaaa"

Y si ponen algo como eso en un comentario, considero yo que debe ser eliminado inmediatamente por el administrador del sitio web.

De todo modos puedes utilizar la propiedad overflow: hidden a tu div de 500 px.

Código HTML:

#posts
{
    overflow: hidden; 
    margin:10px;
    width:500px;
    height:30px;
    background:olive;
    border-radius:3px;
    padding:3px;
    float:left;
    font-size:26px;
    margin-bottom:170px;
}

Espero te sirva de ayuda.

Saludos

Si tenes razón en eso de eliminar, igual con el overflow no funciona, ya lo había probado :S

Y el otro problema tendrías idea, porque si dejo el margin-bottom en auto sobrescribe al div del posts si pongo mas caracteres del height del posts :S

ABrazo y gracias!

[furoya]

Hola novatoide , anavega :

Para lo del desborde de texto puedes leer este tema. Hay varias opciones para resolverlo.

texto que sobrepasa div

Lo otro no lo entiendo porque no veo la imagen, pero debe ser porque para mí es más de las 12 de la noche. De otra forma, seguro lo arreglaría con overflow-y: auto.

Saludos
furo