Texto sale fuera de la capa

[mdromed]

tengo esta clase css que aplico sobre un div

Código PHP:

  div.capaPopup
{
    display: none; 
    position:absolute;
    top: 0px; 
    left: 0px; 
    z-index: 904; 
    color: #221200; 
    border: solid 2px #bdbd5a; 
    background-color: #f6f6af;
    padding: 5px;
    width: 300px;
    line-height: 20px;
    text-align: left;
    font-weight: normal;
} 
   

Y cuando pongo en php un campo de texto que viene de mysql para que se muestre dentro de esa capa popup el texto sale por fuera de la capa, es decir, empieza dentro pero no respeta el limite derecho de la capa y el texto sigue su camino por encima de esta.
Lo pongo de esta manera:

Código PHP:

 <div class="capaPopup"><?php echo nl2br( rscampo["campitoTexto"] );?></div>  

Eso me pasa cuando pongo width con un tamaño fijo de px, pero si no especifico width o pongo "width: auto;" el texto si se queda dentro pero la capa se hace muy muy ancha si el texto es muy grande.

¿Que puedo hacer?

[sebastopols]

Hola, estuve probando tu código, y si, se me sale del div, pero la solución es la siguiente... poné dentro del estilo lo siguiente:

div.capaPopup
{

word-wrap: break-word;

display: none;
position:absolute;
top: 0px;
left: 0px;
z-index: 904;
color: #221200;
border: solid 2px #bdbd5a;
background-color: #f6f6af;
padding: 5px;
width: 300px;
line-height: 20px;
text-align: left;
font-weight: normal;

}

... y listo, saludos.

[mdromed]

Iniciado por sebastopols

word-wrap: break-word;

Pero esa solucion es valida para versiones antiguas de navegadores? O es de css3?

[C2am]

Hola
http://www.w3schools.com/cssref/css3_pr_word-wrap.asp
Saludos

[mdromed]

Pues funciona en ie, pero no en chrome ni firefox.

[mdromed]

Iniciado por mdromed

Pues funciona en ie, pero no en chrome ni firefox.

Me autocorrijo:

Con esto sí funciona en todos los navegadores:

Código:

white-space:normal;

[JairLizcano]

Iniciado por mdromed

Me autocorrijo:

Con esto sí funciona en todos los navegadores:

Código:

white-space:normal;

Te corrijo: esa propiedad está disponible en IE, Safari, Firefox, Chrome y Opera. Y funciona correctamente en estos.

Puedes hacer la prueba desde aquí: http://www.w3schools.com/cssref/tryi...css3_word-wrap

Buena suerte.

[sebastopols]

Hola, si anda, está en el link que te pasaron anteriormente "C2am" y "JairLizcano" y está soportada en todos los navegadores, saludos.

"The word-wrap property is supported in all major browsers."

Default value: normal
Inherited: yes
Version: CSS3
JavaScript syntax: object.style.wordWrap="break-word"
Syntax: word-wrap: normal|break-word;

[mdromed]

Iniciado por sebastopols

Hola, si anda, está en el link que te pasaron anteriormente "C2am" y "JairLizcano" y está soportada en todos los navegadores, saludos.

"The word-wrap property is supported in all major browsers."

Default value: normal
Inherited: yes
Version: CSS3
JavaScript syntax: object.style.wordWrap="break-word"
Syntax: word-wrap: normal|break-word;

Pues a mi me funciona con white-space:normal; en todos los navegadores

[sebastopols]

No dije lo contrario, anda de las dos maneras como dice la w3s.