texto que sale de div

Cuando el texto no tiene espacios y más que el tamaño div 200px , fluye El ancho se define como 200px. He puesto mi código aquí http://jsfiddle.net/madhu131313/UJ6zG/ Puedes ver las siguientes imágenes editadas : Quiero el texto para ir a la siguiente línea

Se debe al hecho de que tiene una palabra larga sin espacios. Puede usar la word-wrappropiedad para hacer que el texto se rompa:

#w74 { word-wrap: break-word; }

También tiene un soporte de navegador bastante bueno. Consulte la documentación al respecto aquí .

Utilizar

white-space: pre-line;

Evitará que el texto fluya fuera del div. Romperá el texto cuando llegue al final del div.

Deberías usar overflow:hidden; oscroll

http://jsfiddle.net/UJ6zG/1/

o con php podrías acortar las palabras largas ...

Debe aplicar la siguiente propiedad CSS al bloque contenedor (div):

overflow-wrap: break-word;

Según las especificaciones (fuente CSS | MDN ):

La overflow-wrappropiedad CSS especifica si el navegador debe insertar o no saltos de línea dentro de las palabras para evitar que el texto se desborde en su cuadro de contenido.

Con el valor establecido en break-word

Para evitar el desbordamiento, las palabras normalmente irrompibles se pueden dividir en puntos arbitrarios si no hay puntos de ruptura aceptables en la línea.

Vale la pena mencionar...

La propiedad era originalmente una extensión de Microsoft no estándar y sin prefijo llamada word-wrap, y fue implementada por la mayoría de los navegadores con el mismo nombre. Desde entonces se le ha cambiado el nombre a overflow-wrap, por word-wrapser un alias.

Si le preocupa la compatibilidad con navegadores heredados, vale la pena especificar ambos:

word-wrap    : break-word;
overflow-wrap: break-word;

Ex. IE9 no reconoce overflow-wrappero funciona bien conword-wrap

usarlo overflow:autole dará un desplazamiento a su texto dentro de div:).

Si esto ayuda. Agregue la siguiente propiedad con valor a su selector:

white-space: pre-wrap;

Esto funcionó para mí:

{word-break: break-all; }

Recientemente encontré esto. Solía:display:block;

Si es solo una instancia que necesita envolverse en 2 o 3 líneas, solo usaría algunas <wbr>en la cadena. Los tratará de la misma forma, <br>pero no insertará el salto de línea si no es necesario.

<div id="w74" class="dpinfo">
adsfadsadsads<wbr>fadsadsadsfadsadsa<wbr>dsfadsadsadsfadsadsads<wbr>fadsadsadsfadsadsadsfa<wbr>dsadsadsfadsadsadsfadsad<wbr>sadsfadsadsads<wbr>fadsadsadsfadsads adsfadsads
</div>

Aquí hay un violín.

http://jsfiddle.net/gaby_de_wilde/UJ6zG/37/