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
Te recomendamos leer:  Filtros CSS3
0 0 votos
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Ahora tienes el curso de CSS3 completo, organizado y estructurado en temas de tal manera que puedas aprender lo más rápido y fácil posible.

Temas del curso CSS3

 

1. Introducción a CSS3
2. Sombras para texto en CSS3
3. La propiedad Word-wrap
4. La regla @ font-face
5. Border-radius: Esquinas redondeadas con CSS3
6. Sombras para cajas con CSS3
7. Degradados y fondos en CSS3
8. Imágenes de fondo con CSS3 background-size
9. La propiedad opacity de CSS3
10. Pseudo-clases y pseudo-elementos de CSS3
11. Transiciones en CSS3
12. Transformaciones en CSS3
13. Animaciones en CSS3
14. Filtros CSS3
15. Ejemplos y ejercicios resueltos CSS3

Te puede interesar

Curso CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos

 

Ahora tienes el curso de CSS3 completo, organizado y estructurado en temas de tal manera que puedas aprender lo más rápido y fácil posible.

Temas del curso CSS3

 

1. Introducción a CSS3
2. Sombras para texto en CSS3
3. La propiedad Word-wrap
4. La regla @ font-face
5. Border-radius: Esquinas redondeadas con CSS3
6. Sombras para cajas con CSS3
7. Degradados y fondos en CSS3
8. Imágenes de fondo con CSS3 background-size
9. La propiedad opacity de CSS3
10. Pseudo-clases y pseudo-elementos de CSS3
11. Transiciones en CSS3
12. Transformaciones en CSS3
13. Animaciones en CSS3
14. Filtros CSS3
15. Ejemplos y ejercicios resueltos CSS3

Te puede interesar

Curso CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos