texto que sale de div

98

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

ingrese la descripción de la imagen aquí

ingrese la descripción de la imagen aquí

madhu131313
fuente

Respuestas:

172

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í .

chipcullen
fuente
3
no funcionó para mí aquí es otro ejemplo.
Deepak Vaishnav
Esto es increíble, resuelto un problema en la página receptiva
yussan
Qué solución tan limpia y fácil. Gracias por compartirlo.
Dzenis H.
108

Utilizar

white-space: pre-line;

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

Nixon
fuente
28

Deberías usar overflow:hidden; oscroll

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

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


fuente
Awesome.sorry mencionar que quiero que se vaya a la siguiente línea como el chat de Gmail o Facebook Chat :)
madhu131313
¡Entonces puedes usar la versión de @chipcullen con ajuste de palabras! demo: jsfiddle.net/UJ6zG/3
8

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

Paolo
fuente
Gracias, funcionó para mí. Escribiste "Con el valor establecido para romper el mundo". Estoy bastante seguro de que quisiste decir "romper la palabra" sin la "l", espero que no tuvieras la intención de romper el mundo;)
Jake Neumann
7

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

Rahul Razdan
fuente
4

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

white-space: pre-wrap;
Martín Lloyd José
fuente
2

Esto funcionó para mí:

{word-break: break-all; }

Addo
fuente
1
muchas gracias, esto fue lo único que funcionó para mi (usando componentes con estilo en React)
mlz7
0

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

arn-arn
fuente
-6

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/

gaby de wilde
fuente