¿Cómo forzar un salto de línea en una palabra loooooong en un DIV?

No estoy seguro de la compatibilidad del navegador

word-break: break-all;

También se puede utilizar <wbr> tag

<wbr> (word break) significa: "El navegador puede insertar un salto de línea aquí, si desear."Si el navegador no piensa un salto de línea necesario nada suceder.

Esto podría añadirse a la respuesta aceptada para una solución 'cross-browser'.

Fuentes:

• http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css /
• http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

CSS

.your_element{
    -ms-word-break: break-all;
    word-break: break-all;

 /* Non standard for webkit */
     word-break: break-word;

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

Yo estaba buscando en Google el mismo problema, y publicado mi solución final AQUÍ . También es relevante para esta pregunta, así que espero que no te importe volver a publicar.

Puede hacer esto fácilmente con un DIV dándole el estilo word-wrap: break-word (y es posible que también necesite establecer su ancho).

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

Sin embargo, para las tablas, también debe aplicar: table-layout: fixed. Esto significa que los anchos de las columnas ya no son fluidos, sino que se definen en función de los anchos de las columnas primera fila solamente (o a través de anchos especificados). Lea más aquí.

Código de ejemplo:

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

Espero que eso ayude a alguien.

​ es la entidad HTML para un carácter unicode llamado espacio de ancho cero (ZWSP) que es un carácter invisible que especifica una oportunidad de salto de línea. Del mismo modo, el propósito del guion es especificar una oportunidad de salto de línea dentro del límite de una palabra.

Encontró que el uso de lo siguiente funcionó en la mayoría de los navegadores principales (Chrome, IE, Safari iOS/OSX), excepto Firefox (v50.0.2) cuando se utiliza flex-box y se basa en width: auto.

.your_element {
    word-wrap: break-word;   
    overflow-wrap: break-word;
    word-break: break-word;
}

Nota: es posible que necesite agregar prefijos de proveedor del navegador si no está utilizando un autoprefixer.

Otra cosa a tener en cuenta es que el texto usando   para el espaciado puede causar saltos de línea a mitad de palabra.

CSS word-wrap:break-word;, probado en FireFox 3.6.3

Resolví mi problema con el código de abajo.

display: table-caption;

Primero debe identificar el ancho de su elemento. Eg:

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

#sampleDiv{
  width: 80%;
  word-wrap:break-word;
}

De modo que cuando el texto alcance el ancho del elemento, se dividirá en líneas.

De MDN:

La propiedad CSS overflow-wrap especifica si el navegador debe o no insertar saltos de línea dentro de las palabras para evitar que el texto rebose su caja de contenido.

En contraste con word-break, overflow-wrap solo creará un descanso si una palabra entera no se puede colocar en su propia línea sin desbordarse.

Así que puedes usar:

overflow-wrap: break-word;

Puedo usar?

Eliminar white-space: nowrap, si hay alguno.

Implementar:

    white-space: inherit;
    word-break: break-word;

Haz esto:

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

#sampleDiv{
   overflow-wrap: break-word;
}

Solo prueba esto en nuestro estilo

white-space: normal;