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

De acuerdo, esto realmente me está confundiendo. Tengo algo de contenido dentro de un div así:

<div style="background-color: green; width: 200px; height: 300px;">

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

</div>

Sin embargo, el contenido desborda el DIV (como se esperaba) porque la 'palabra' es demasiado larga.

¿Cómo puedo forzar al navegador a 'romper' la palabra cuando sea necesario para ajustar todo el contenido dentro?

Utilizar word-wrap:break-word;

Incluso funciona en IE6, que es una sorpresa agradable.

word-wrap: break-wordha sido reemplazado por el overflow-wrap: break-word;que funciona en todos los navegadores modernos. IE, al ser un navegador inactivo, dependerá para siempre de lo obsoleto y no estándar word-wrap.

Los usos existentes de word-wraphoy todavía funcionan, ya que es un alias para overflow-wrapla especificación.

No estoy seguro de la compatibilidad del navegador.

word-break: break-all;

También puedes usar la <wbr>etiqueta

<wbr>(salto de palabra) significa: "El navegador puede insertar un salto de línea aquí, si lo desea". Si el navegador no cree que sea necesario un salto de línea, no sucede nada.

Esto podría agregarse 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/

.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;
}

Estaba buscando en Google el mismo problema y publiqué mi solución final AQUÍ . También es relevante para esta pregunta.

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 es necesario 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 en la primera fila solamente (o a través de anchos especificados). Lee más aquí .

Código de muestra:

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 */
}

​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. De manera similar, el propósito del guión es especificar una oportunidad de salto de línea dentro del límite de una palabra.

Descubrí que usar lo siguiente funcionó en la mayoría de los principales navegadores (Chrome, IE, Safari iOS / OSX), excepto Firefox (v50.0.2) al usar flexbox y confiar en él width: auto.

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

Nota: es posible que deba agregar prefijos de proveedor de navegador si no está utilizando un corrector automático.

Otra cosa a tener en cuenta es que el uso de texto  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 a continuación.

display: table-caption;

Eliminar white-space: nowrap, si hay alguno.

Implementar:

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

El navegador conserva el espacio en blanco. El texto se ajustará cuando sea necesario y en los saltos de línea

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

MANIFESTACIÓN

td {
   word-break: break-word;
   white-space: pre-wrap;
   -moz-white-space: pre-wrap;      
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}

<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>

De MDN :

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

Por el contrario word-break, overflow-wrapsolo creará un salto si no se puede colocar una palabra completa en su propia línea sin desbordarse.

Entonces puedes usar:

overflow-wrap: break-word;

Puedo usar ?

Primero debes identificar el ancho de tu elemento. P.ej:

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

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

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

Como se menciona en la respuesta de @ davidcondrey, no solo el ZWSP, sino también el SHY ­ ­se puede usar en palabras muy largas y construidas (piense en alemán u holandés) que deben romperse en el lugar que desea que sea. Invisible, pero le da un guión en el momento en que se necesita, manteniendo las palabras conectadas y la línea llena al máximo.

De esa manera, la palabra luchthavenpolitieagent podría notarse como la lucht­haven­politie­agentque da partes más largas que las sílabas de la palabra.
Aunque nunca leí nada oficial al respecto, estos guiones suaves logran tener mayor prioridad en los navegadores que los guiones oficiales en las palabras simples de la construcción ( si tienen alguna extensión para ello).
En la práctica, ningún navegador es capaz de romper una palabra tan larga y construida por sí mismo; en pantallas más pequeñas que dan como resultado una nueva línea, o en algunos casos incluso una línea de una palabra (como cuando dos de esas palabras construidas siguen).

FYI: es holandés para el oficial de policía del aeropuerto

salto de palabra: normal parece mejor usar que salto de palabra: salto de palabra porque el salto de palabra se rompe inicialmente como EN

word-break: normal

Hacer esto:

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

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

solo prueba esto en nuestro estilo

white-space: normal;