overflow-wrap

Índice

Definición de .overflow-wrap utilizado en CSS

La propiedad .overflow-wrap en CSS le permite especificar que el navegador puede romper una línea de texto dentro del elemento dirigido en múltiples líneas en un lugar inquebrantable. Esto ayuda a evitar una cadena de texto inusualmente larga que causa problemas de diseño debido al desbordamiento.

Caso de empleo : propiedad CSS overflow-wrap

Esta propiedad de CSS normalmente se utiliza de la siguiente manera:

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

Otro ejemplo más avanzado de .overflow-wrap es el siguiente de CODEPEN:

Sintaxis de .overflow-wrap en CSS

overflow-wrap: normal|anywhere|break-word|initial|inherit;

Valores

Valor Descripción Manifestación
normal Las palabras largas no se romperán, incluso si desbordan el contenedor. esto es por defecto
en cualquier sitio Las palabras largas se romperán si desbordan el contenedor.
romper-palabra Las palabras largas se romperán si desbordan el contenedor.
inicial Establece esta propiedad en su valor predeterminado.
heredar Hereda esta propiedad de su elemento principal.

Exploradores compatibles con .overflow-wrap

Los números de la tabla especifican la primera versión del navegador que es plenamente compatible con la propiedad.

Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.

PropertyChromeInternet Explorer / EdgeFirefoxSafariOpera
padding 1.0 4.0 1.0 1.0 3.5

Referencias técnicas

Echa un vistazo a estas otras propiedades

¿Necesitas ayuda para crear tu Web?

Cuéntanos de que trata y te asesoraremos sin compromiso