La propiedad Word-wrap sirve para controlar palabras largas que pueden exceder un contenedor, podemos hacer que la palabra larga se interrumpa y continúe en la siguiente línea, de tal manera que queda ajustada dentro del contenedor o podemos dejar tal cual, para ello haremos uso de un par de valores, veamos.
Ver índice del contenido
Valores para la propiedad Word-wrap
Esta propiedad puede tomar uno de dos valores posibles: normal o break-work, a continuación veamos de qué se tratan y algunos ejemplos para verlos en acción.
Normal
El valor normal hace que la no se altere y quede como por defecto, es decir no hace efecto visible sobre el texto; si el texto sobrepasa el contendor, entonces continuará sobrepasando con el valor normal.
Ejemplos de Word-wrap: normal;
<style>
#texto {
word-wrap:normal;
width:250px;
height:150px;
border: 1px solid blue;
}
</style>
<p id="texto"> Palabramuylargaquesobreasaelcontenedordetexto. Este es un párrafo ejemplo para ver como funciona la propiedad word-wrap de CSS3 cuando el valor que toma es la normal. Aquiotrapalabramuylargaparaverquesuscedeconlapropiedadqueestamoscocnociendo.</p>Break-word
El valor break-word hará que las palabras largas que sobrepasa un contenedor se ajuste y quede totalmente dentro de dicho contenedor, para ello se romperán dichas palabras si es necesario para continuar en la siguiente línea de texto.
Ejemplo de Word-wrap: break-word
<style>
#texto {
word-wrap:break-word;
width:250px;
height:150px;
border: 1px solid blue;
}
</style>
<p id="texto"> Palabramuylargaquesobreasaelcontenedordetexto. Este es un párrafo ejemplo para ver como funciona la propiedad word-wrap de CSS3 cuando el valor que toma es la break-word. Aquiotrapalabramuylargaparaverquesuscedeconlapropiedadqueestamoscocnociendo.</p>[popup_anything id=»5821″]