Problema con DIVS y textos variables

[elnaza_14]

Hola a todos.

De antemano quisiera agradecerles porque a pesar de ser la primera vez que realizo una pregunta personalmente me han ayudado una multitud de veces con las distintas explicaciones y soluciones que diariamente brindan.

Han de tener en cuenta que no soy muy conocedor de CSS, hasta ahora he venido trabajando con tablas y tags de formato pero bueno, tengo que modernizarme ).

El problema es el siguiente: en un archivo HTML Dispongo de un DIV en el que almaceno texto que voy generando automáticamente (en este caso con Javascript) y la cuestión es que, al llegar el texto al borde derecho se sale del contenedor (en el caso de que la palabra sea muy larga y no hayan sido introducidos espacios).

He probado colocando el valor break-word en el atributo word-wrap y no ha funcionado en ningún navegador...

Les dejo el código que he estado utilizando:

Dentro de las etiquetas de estilo:

Código CSS:

#texto{
        width:500px;
        height:300px;
        background-color:#BCC8D5;
        word-wrap:break-word;
    }
 

En el cuerpo de la página

Código HTML:

<div id="texto"> <!-- Cuerpo -->
</div> 

He probado también varias soluciones que aquí se brindaron (incluso me atrajo mucho una que incluye scroll vertical sin scroll horizontal, pero tampoco funcionó).

Disculpen por la longitud del mensaje pero no quería "dejar nada colgado". Desde ya les agradezco enormemente por su atención.

[abimaelrc]

Podrías indicar que el contenido tenga un "scroll" con overflow: auto y un width especifico.

[elnaza_14]

Iniciado por abimaelrc

Podrías indicar que el contenido tenga un "scroll" con overflow: auto y un width especifico.

¡Un millón de gracias! ¡La verdad que la solución me vino excelente y funcionó al primer intento!

Te agradezco enormemente la ayuda brindada y la prontitud y exactitud de la respuesta!

Dejo el código resultante por las dudas que a alguien le sirva (dado que vi que este problema es bastante recurrente).

Con la solución de abimaelrc el código quedó así:

En la definición de estilos:

Código CSS:

#texto{
        width:500px;
        height:280px;
        background-color:#BCC8D5;
        word-wrap:break-word;
        overflow:auto;
    }
 

En el cuerpo de la página:

Código HTML:

<div id="texto" style="text-align:justify;"> <!-- Cuerpo -->
</div> 

* El nuevo atributo (text-align) fue agregado por un tema de diseño simplemente .

Bueno, sin más... ¡un millón de gracias otra vez!