La propiedad Word-wrap

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.

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>
Curso css3 - temas
Rate this post
Te recomendamos leer:  Ejemplos y ejercicios resueltos CSS3
5 1 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios