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.
Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
padding | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |