retorno - salto de linea en title html

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

Question

Está bien, esto es realmente confuso para mí. Tengo algo de contenido dentro de un div como este:

<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 que se ajuste a todo el contenido que contiene?

Answer 1

Desde MDN :

La propiedad CSS de overflow-wrap 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.

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

Así que puedes usar:

overflow-wrap: break-word;

Puedo usar

Answer 2

Eliminar white-space: nowrap , si hay alguno.

Implementar:

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

Answer 3

Esto podría agregarse a la respuesta aceptada para una solución de "navegador cruzado".

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

Answer 4

Hacer esto:

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
#sampleDiv{
overflow-wrap: break-word;
}

Answer 5

No estoy seguro de la compatibilidad del navegador.

word-break: break-all;

También puedes usar la etiqueta <wbr>

<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 pasa nada.

Answer 6

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

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

Answer 7

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

display: table-caption;

Answer 8

Se encontró que el uso de lo siguiente funcionó en la mayoría de los principales navegadores (Chrome, IE, Safari iOS / OSX), excepto Firefox (v50.0.2) al usar flex-box y confiar en el width: auto .

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

nota: es posible que deba agregar prefijos de proveedores del navegador si no está utilizando un autorefijo.

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

Answer 9

Use word-wrap:break-word;

Incluso funciona en IE6, lo cual es una grata sorpresa.

Answer 10

solo prueba esto en nuestro estilo

white-space: normal;

Answer 11

​ 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 de un límite de palabra.

Answer 12

Estaba buscando en Google el mismo problema y publiqué mi solución final HERE . También es relevante para esta pregunta, así que espero que no te importe la nueva publicación.

Puede hacerlo fácilmente con un DIV dándole el estilo de ajuste de word-wrap: break-word (y es posible que también deba 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 solo en la primera fila (oa través de los anchos especificados). Lea 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 */
}

Espero que ayude a alguien.

Answer 13

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