Text en CSS

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.

1. Text-Align

Determina el alineamiento del texto. Sus posibles valores son: left | right | center | justify | justify-all | start | end | match-parent, ademas de los valores globales: initial | unset | inherit.

text-align: left | right | center | justify | justify-all | start | end | match-parent | initial | unset | inherit;

Esta propiedad si es muy útil.

2. Text-Decoration

Define la decoración del texto. Sus posibles valores son : none | undeline.

text-decoration: underline | none;

3. Text-Indent

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

4. Text-Justify

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 de propiedad text-justify
ValorDescripción
autoEl navegador determina el algoritmo de justificación.
inter-wordAumenta/disminuye el espacio entre palabras
inter-character Aumenta/disminuye el espacio entre personajes
noneDesabilita la justificacion
initialEstablece esta propiedad en su valor predeterminado.
inheritHereda 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;
}

5. Text-Overflow

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.

Valores de text-overflow
ValorDescripción
clipeste 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.
ellipsiseste 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.
stringse 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%);

6. Text-Shadow

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;

7. Text-Transform

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;

8. Letter-Spacing

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;

9. Word-Break

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;

10. Word-Spacing

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%;

11. Line-Break

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.

12. Line-Height

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: 2.1;
line-height: 14pt;
line-height: 150%;

13. White-Space

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;

14. Hyphens

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.

15. Tab-Size

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: 0;
tab-size: 4;
tab-size: 10px;
tab-size: 2em;