Texto CSS3
CSS3 contiene varias características nuevas de texto.
En este capítulo aprenderá acerca de las siguientes propiedades de texto:
-
text-overflow -
word-wrap -
word-break
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos por -O- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
| word-wrap | 23.0 | 5.5 | 3.5 | 6.1 | 12.1 |
| word-break | 4.0 | 5.5 | 15.0 | 3.1 | 15.0 |
CSS3 desbordamiento de texto
El CSS3 text-overflow propiedad especifica cómo el contenido desbordado que no se muestra debe ser una señal para el usuario.
Se puede sujetar:
Esto es un texto largo que no cabe en el cuadro
o se puede representar como una elipsis (...):
Esto es un texto largo que no cabe en el cuadro
El código CSS es el siguiente:
Ejemplo
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
} Inténtalo tú mismo " El siguiente ejemplo muestra cómo puede mostrar el contenido desbordado cuando se cierne sobre el elemento:
CSS3 ajuste de texto
El CSS3 word-wrap propiedad permite que las palabras largas para poder ser roto y se envuelve en la línea siguiente.
Si una palabra es demasiado larga para caber dentro de un área, se expande fuera:
Este párrafo contiene una palabra muy larga: thisisaveryveryveryveryveryverylongword . La palabra larga se romperá y envolver a la línea siguiente.
La propiedad word-wrap permite forzar el texto para envolver - incluso si esto significa que la división en el medio de una palabra:
Este párrafo contiene una palabra muy larga: thisisaveryveryveryveryveryverylongword . La palabra larga se romperá y envolver a la línea siguiente.
El código CSS es el siguiente:
Ejemplo
Permitir que las palabras largas para poder ser roto y salten sobre la siguiente línea:
p {
word-wrap: break-word;
}
Inténtalo tú mismo " La separación de palabras CSS3
El CSS3 word-break propiedad especifica reglas de división de líneas.
Este párrafo contiene un poco de texto. Esta línea-romper-en-guiones.
Este párrafo contiene un poco de texto. Las líneas se romperán en cualquier carácter.
El código CSS es el siguiente:
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 »
Propiedades del texto CSS3
En la siguiente tabla se muestran las nuevas propiedades de texto CSS3:
| Propiedad | Descripción |
|---|---|
| text-align-last | Especifica cómo alinear la última línea de un texto |
| text-emphasis | Una forma rápida para establecer énfasis al estilo de texto y el texto-énfasis-color en una declaración |
| text-justify | Especifica cómo justifica el texto debe estar alineada y espaciada |
| text-overflow | Especifica cómo el contenido desbordado que no se muestra debe ser señalizada al usuario |
| word-break | Especifica reglas de salto de línea para los alfabetos no CJC |
| word-wrap | Permite a las palabras largas para poder ser roto y se envuelve en la línea siguiente |