Efectos de texto CSS
Desbordamiento de texto CSS , ajuste de línea, reglas de salto de línea y modos de escritura
En este capítulo aprenderá acerca de las siguientes propiedades:
text-overflowword-wrapword-breakwriting-mode
Desbordamiento de texto CSS
La propiedad CSS text-overflowespecifica cómo se debe señalar al usuario el contenido desbordado que no se muestra.
Se puede recortar:
Este es un texto largo que no cabe en el cuadro
o puede representarse como puntos suspensivos (...):
Este 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;
}
El siguiente ejemplo muestra cómo puede mostrar el contenido desbordado al pasar el cursor sobre el elemento:
Ejemplo
div.test:hover {
overflow: visible;
}
Ajuste de palabras CSS
La propiedad CSS word-wrappermite que las palabras largas se puedan dividir y pasar a la siguiente línea.
Si una palabra es demasiado larga para caber dentro de un área, se expande hacia afuera:
Este párrafo contiene una palabra muy larga: esta es una palabra muy muy muy muy larga. La palabra larga se dividirá y pasará a la siguiente línea.
La propiedad word-wrap le permite forzar el ajuste del texto, incluso si eso significa dividirlo en medio de una palabra:
Este párrafo contiene una palabra muy larga: esta es una palabra muy muy muy muy larga. La palabra larga se dividirá y pasará a la siguiente línea.
El código CSS es el siguiente:
Ejemplo
Permita que las palabras largas se puedan dividir y pasar a la siguiente línea:
p {
word-wrap: break-word;
}
Separación de palabras CSS
La propiedad CSS word-breakespecifica las reglas de salto de línea.
Este párrafo contiene algo de texto. Esta línea se romperá con guiones.
Este párrafo contiene algo de texto. Las líneas se romperán en cualquier carácter.
El código CSS es el siguiente:
Ejemplo
p.test1 {
word-break:
keep-all;
}
p.test2 {
word-break:
break-all;
}
Modo de escritura CSS
La propiedad CSS writing-modeespecifica si las líneas de texto se disponen horizontal o verticalmente.
Algún texto con un elemento span con un vertical-rl modo de escritura.
El siguiente ejemplo muestra algunos modos de escritura diferentes:
Ejemplo
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode:
vertical-rl;
}
Propiedades de efectos de texto CSS
La siguiente tabla enumera las propiedades del efecto de texto CSS:
| Property | Description |
|---|---|
| text-justify | Specifies how justified text should be aligned and spaced |
| text-overflow | Specifies how overflowed content that is not displayed should be signaled to the user |
| word-break | Specifies line breaking rules for non-CJK scripts |
| word-wrap | Allows long words to be able to be broken and wrap onto the next line |
| writing-mode | Specifies whether lines of text are laid out horizontally or vertically |