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


417

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?


Eche un vistazo a esta pregunta: stackoverflow.com/questions/2046530/…
nickf

Respuestas:


610

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.


75
En realidad, el ajuste de texto es una invención de IE. Así que no sorprende que funcione en IE :)
Savas Vedova

1
Para que esto funcione en una tabla, es posible que deba aplicarlo table-layout: fixed;a la tabla
Serj Sagan el

28
word-wrap: break-wordno funcionó para mí, pero word-break: break-wordcomo sugirió a continuación @rahul funcionó.
Yves

1
Nota: Esto funcionará solo si lo da en div padre en IE (no en el espacio interior dentro de div).
sms

125

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.


23
Tenga en cuenta ese salto de palabra: romper todo; separará las palabras en el medio si aún puede encajar cualquier carácter en una línea con otras palabras antes, lo que podría no ser el resultado deseado, mientras que la palabra se ajusta: palabra-pausa; mueve las palabras a una nueva línea y solo rompe la palabra si es demasiado larga para encajar en su propia línea en el contenedor. Ejemplo: jsfiddle.net/4AKhn/1
alexteg

break-all rompe todo Está bien usarlo con una clase específica que solo tiene URL larga, etc., pero no con BODY o P
Upendra

Esto es definitivamente perfectamente (y deseado) aceptable cuando intentas mostrar algo así como un URI de solicitud en una celda de la tabla de registro, y necesitas que deje de romper toda la tabla con una celda larga gigante. Se quiere romper en el medio de una 'palabra';) Si bien la respuesta aceptada no se pone en cuclillas a este respecto.
Increíble:

@ Skelly1983 no hay tal cosa como IE12
TylerH

@ TylerH Soy consciente de esto, gracias por señalarme esto después de 3 años. Esto aparece en el cuadro de soporte del navegador w3schools para la etiqueta wbr, que enumera el soporte como "Internet Explorer / Edge" y tiene el número de versión listado como 12.0, que de hecho es la primera versión de Edge.
Skelly1983

98

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

Fuentes:

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

Lo obtuve en Chrome / Opera y Safari, pero aún no lo obtuve en Firefox e IE. Con esto resolví Firefox, pero IE todavía está revisando el contenedor (tengo un nombre de archivo largo de solo caracteres alfanuméricos).
Kamafeather

1
Hola, Kamafeather, no estoy seguro, pero si realmente intentas romper el nombre de archivo, todo el contexto (navegador, código html-css) podría ser útil para ayudarte más. Tal vez, podría crear otra pregunta con su situación.
Milche Patern

Tenga en cuenta que esto rompe las palabras en lugares no gramaticales.

@ user1322720 ¿qué es un lugar "no gramatical"?
TylerH

31

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

1
Gracias por la solución de tablas;) Sin embargo, no entiendo muy bien por qué la palabra clave no se puede usar con el diseño automático. ¿Cualquier sugerencia?
ondObno

@ondObno Sí, no estoy seguro de la razón técnica, pero varios navegadores parecen comportarse de esta manera. Tal vez sea porque las palabras súper largas alteran todos los cálculos necesarios para determinar el ancho de cada columna.
Simon East

¡La configuración width: 100%;fue la única forma de hacer que esto funcionara para mí en FF y Chrome!
Putzi San

27

&#8203;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.


1
Muy buen consejo! Solo para complementar: &#8203;tiene menor prioridad que un espacio en blanco (es decir, si hay uno cerca, la línea se dividirá en un espacio en blanco).
CPHPython

Parece ser el <wbr/>equivalente unicode que estaba buscando
Xenos

20

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 &nbsp;para el espaciado puede causar saltos de línea a mitad de palabra.


55
Esto es exactamente lo que necesitaba. Las otras soluciones no funcionaban con ancho: 100%. Una cosa a tener en cuenta : salto de palabra: salto de palabra; debe ser word-break: break-all;
jscul

7

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



5

Eliminar white-space: nowrap, si hay alguno.

Implementar:

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

3

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>


2

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 ?


2

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.


2

Como se menciona en la respuesta de @ davidcondrey, no solo el ZWSP, sino también el SHY &#173; &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&shy;haven&shy;politie&shy;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


0

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

-3

Hacer esto:

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

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

-4

solo prueba esto en nuestro estilo

white-space: normal;

1
Duplicar respuestas en múltiples preguntas está mal visto en la mayoría de los casos. En este caso, parece ser una respuesta incorrecta a ambas preguntas. normales el white-spacevalor predeterminado Creo que agregarlo no tendría ningún efecto en el ejemplo de la pregunta. Por favor corrígeme si me equivoco.
Jeremy Banks

Depende de la anulación realizada por el CSS. En mi caso, tuve que volver a declararlo en "estilo" en mi componente JSF para anular el estilo CSS predeterminado que no era "espacio en blanco: normal";
Benjamin Fuentes
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.