El word-breakCSS establece si los saltos de línea aparecen donde el texto desbordaría su cuadro de contenido.

Sintaxis

/* Keyword values */word-break: normal;word-break: break-all;word-break: keep-all;word-break: break-word;/* deprecated *//* Global values */word-break: inherit;word-break: initial;word-break: unset;

El word-break La propiedad se especifica como una sola palabra clave elegida de la lista de valores a continuación.

Valores

normal
Utilice la regla de salto de línea predeterminada.
break-all
Para evitar el desbordamiento, se deben insertar saltos de palabras entre dos caracteres cualesquiera (excluyendo el texto chino / japonés / coreano).
keep-all
Los saltos de palabras no deben usarse para texto en chino / japonés / coreano (CJK). El comportamiento del texto no CJK es el mismo que para normal.
break-word Esta API obsoleta ya no debería usarse, pero probablemente seguirá funcionando.
Tiene el mismo efecto que word-break: normal y overflow-wrap: anywhere, independientemente del valor real de la overflow-wrap propiedad.

Nota: En contraste con word-break: break-word y overflow-wrap: break-word (ver overflow-wrap), word-break: break-all creará una ruptura en el lugar exacto donde el texto desbordaría su contenedor (incluso si poner una palabra completa en su propia línea anularía la necesidad de una ruptura).

Definicion formal

Valor inicial normal
Se aplica a todos los elementos
Heredado sí
Valor calculado Como se especificó
Tipo de animación discreto

Sintaxis formal

normal | break-all | keep-all | break-word

Ejemplos de

HTML

<p>1. <code>word-break: normalcode>p><pclass="normal narrow">This is a long and
 Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉p><p>2. <code>word-break: break-allcode>p><pclass="breakAll narrow">This is a long and
 Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉p><p>3. <code>word-break: keep-allcode>p><pclass="keepAll narrow">This is a long and
 Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉p><p>4. <code>word-break: break-wordcode>p><pclass="breakWord narrow">This is a long and
  Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
 グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉p>

CSS

.narrowpadding: 10px;border: 1px solid;width: 500px;margin: 0 auto;font-size: 20px;line-height: 1.5;letter-spacing: 1px;.normalword-break: normal;.breakAllword-break: break-all;.keepAllword-break: keep-all;.breakWordword-break: break-word;

Especificaciones

Especificación Estado Comentario
Módulo de texto CSS nivel 3
La definición de “salto de palabra” en esa especificación.		 Recomendación candidata Definición inicial

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android Chrome Android Firefox para Android Opera Android Safari en IOS Internet de Samsung
word-break 1 12 15 5.5 Ninguna versión de Internet Explorer es compatible initial valor.8 No usar -ms-word-break, que es sinónimo de word-break. 15 3 ≤37 18 15 14 2 1.0
break-word 1 79 67 No 15 3 ≤37 18 67 14 2 1.0
keep-all 44 12 15 5.5 31 9 44 44 15 32 9 4.0

Ver también

  • overflow-wrap
  • hyphens
  • Guía para envolver y dividir texto