El formateo de texto es uno de los usos mas extendidos de CSS. De plano reemplaza la etiqueta FONT con sus atributos SIZE, COLOR y FACE.
Determina el alineamiento del texto. Sus posibles valores son: left | right | center | justify, ademas de los valores globales: initial | unset | inherit.
text-align: left | right | center | justify | initial | unset | inherit;
Esta propiedad si es muy útil.
Define la decoración del texto. Sus posibles valores son: none|underline|overline|line-through.
text-decoration: line color style;
| Parámetro | Descripción |
|---|---|
| text-decoration-line | Establece el tipo de decoración de texto a usar. none|underline|overline|line-through. |
| text-decoration-color | Especifica el color de la decoración del texto. |
| text-decoration-style | Establece el estilo de la decoración del texto. solid|double|dotted|dashed|wavy |
text-decoration: underline red dotted;
Determina el indentado. Sus posibles valores son: absoluto (mm, px, em) | relativo (%) | each-line | hanging, ademas de los valores globales: initial | unset | inherit.
text-indent: absoluto | relativo | each-line | hanging | initial | unset | inherit;
Ejemplos
text-indent: 40px; text-indent: 15%; text-indent: 5em each-line; //Indenta solo 1 linea text-indent: 5em hanging; //Indenta todas menos primera
La propiedad text-justify especifica el método de justificación del texto cuando text-align se establece en "justify".
text-justify: auto | inter-word | inter-character | none | initial | inherit;
Esta característica está detrás de la preferencia Habilitar características experimentales de la plataforma web (debe establecerse en Habilitada). Para cambiar las preferencias en Chrome: escriba "chrome: // flags" en el navegador Chrome. Para cambiar las preferencias en Opera: escriba "flags" en el navegador Opera.
| Valor | Descripción |
|---|---|
| auto | El navegador determina el algoritmo de justificación. |
| inter-word | Aumenta/disminuye el espacio entre palabras |
| inter-character | Aumenta/disminuye el espacio entre personajes |
| none | Desabilita la justificacion |
| initial | Establece esta propiedad en su valor predeterminado. |
| inherit | Hereda del padre |
Establezca el método de justificación en "inter-word" cuando text-align esté configurado en "justify":
div {
text-align: justify;
text-justify: inter-word;
}
Define la forma como el contenido debe truncar o desbordar el contenedor. Posibles valores son: clip | ellipsis | string | fade
text-overflow: clip | ellipsis | string | fade | initial | inherit;
Se requiere white-space: nowrap; overflow: hidden; para desbordar.
| Valor | Descripción |
|---|---|
| clip | este valor indica la palabra clave para truncar el texto en el límite del área de contenido, por lo tanto, el truncamiento puede ocurrir en medio de un personaje. Para truncar en la transición entre dos caracteres, el valor de cadena vacía ( ''debe ser usado). El valor clip es el valor predeterminado de esta propiedad. |
| ellipsis | este valor indica la palabra clave para mostrar una elipsis ('…', U+2026 HORIZONTAL ELLIPSIS) para representar texto recortado. Los puntos suspensivos se muestra en el interior del área de contenido, disminuyendo la cantidad de texto que se muestra. Si no hay suficiente espacio para mostrar los puntos suspensivos, se recorta. |
| string | se usa para representar el texto recortado. La cadena se muestra en el interior del área de contenido, acortando más el tamaño del texto mostrado. Si no hay suficiente lugar para mostrar la propia cadena, que se recorta. |
| fade | define línea de contenido desbordante y aplica un efecto de desaparición gradual cerca del borde de la caja de línea con total transparencia en el borde. |
Algunos ejemplos
text-overflow: fade(10px); text-overflow: fade(5%); text-overflow: clip ellipsis; text-overflow: "…" "…"; text-overflow: fade clip; text-overflow: fade(10px) fade(10px); text-overflow: fade(5%) fade(5%);
Define la sombras de texto. Se acepta una lista separada por comas de sombras que se aplicará al texto y text-decorations del elemento. Cada sombra se especifica como un desplazamiento desde el texto, junto con valores de color y radio de desenfoque opcionales. Múltiples sombras se aplican de delante a atrás, con la primera especificado sombra en la parte superior.
text-shadow: horizontal vertical color; text-shadow: none; text-shadow: 5px 10px; text-shadow: 5px 5px #558ABB; text-shadow: 1px 1px 2px black; text-shadow: #CCC 1px 0 10px; text-shadow: white 2px 5px; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
Define cómo se presentara el texto sin importar como este halla sido escrito. Se puede usar para que el texto aparece en todo en mayúsculas (uppercase) o todo en minúsculas (lowercase), o que la primera letra de cada palabra en mayúscula (capitalize). Los posibles valores son: none | capitalize | uppercase | lowercase | full-width, ademas de los valores globales: initial | unset | inherit.
text-transform: none | capitalize | uppercase | lowercase | full-width | initial | unset | inherit;
Define el espacio entre caracteres. Posibles valores son: normal | absoluto (em, px)
letter-spacing: normal; letter-spacing: 0.3em; letter-spacing: 3px; letter-spacing: .3px;
Define donde romper la palabra. Posibles valores son: normal | break-all | keep-all, ademas de los valores globales initial | unset | inherit.
word-break: normal | break-all | keep-all | initial | unset | inherit;
Define el espacio entre palabras. Posibles valores son: normal | absoluto (mm, px, em) | relativo (%), ademas de los valores globales initial | unset | inherit.
word-spacing: normal; word-spacing: 0.3em; word-spacing: 3px; word-spacing: 50%;
Permite que las palabras largas puedan separarse y ajustarse a la siguiente línea.
word-wrap: normal|break-word|initial|inherit;
Define donde romper la linea. Posibles valores son: normal | auto | loose | strict, ademas de los valores globales initial | unset | inherit.
line-break: normal | auto | loose | strict | initial | unset | inherit;
auto romper texto usando la regla de salto de línea por defecto.
loose romper texto usando la regla de salto de línea que la línea es más corta como un periódico.
strict romper texto usando la regla de salto de línea estricta.
Define la altura de la caja tipo en línea (inline) que se usará para calcular la altura de la línea (excepto para cajas de tipo inline que no son texto, como las imágenes). La altura de la línea se calcula de forma que contenga en ella a todos los elementos. Sus posibles valores son: normal | numero | length | %, ademas de los valores globales initial | unset | inherit.
line-height: normal|number|length|initial|inherit;
line-height: 2.1; line-height: 14pt; line-height: 150%;
Define como los espacios en blanco dentro del texto seran manejados. Posibles valores son: normal | nowrap | pre | pre-wrap | pre-line, ademas de los valores globales initial | unset | inherit.
white-space: normal | nowrap | pre | pre-wrap | pre-line | initial | unset | inherit;
Define si las palabras pueden o no romperse y como. Posibles valores son: none | manual | auto, ademas de los valores globales initial | unset | inherit.
hyphens: none | manual | auto | initial | unset | inherit;
En auto el navegador es libre para romper automáticamente las palabras en el punto de separación adecuados, siguiendo cualquier regla que se opta por usar.
Define el ancho asignado a un TAB. El valor inicial es 8. Los posibles valores son: absoluto, ademas de los valores globales initial | unset | inherit.
tab-size: number|length|initial|inherit;
tab-size: 0; tab-size: 4; tab-size: 10px; tab-size: 2em;