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: justify;

Esta propiedad si es muy util.

2. Text-Decoration

Define la decoracion del texto. Sus posibles valores son : none | undeline.

text-decoration: underline;
text-decoration: 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: 40px;
text-indent: 15%;
text-indent: 5em each-line; //Indenta solo 1 linea
text-indent: 5em hanging;   //Indenta todas menos primera

4. Text-Overflow

Define la forma como el contenido debe truntar o desbordar el contenedor. Posibles valores son: clip | elipsis | fade

text-overflow: clip;
text-overflow: ellipsis;
text-overflow: "…";
text-overflow: fade;
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%);

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 utilizado). El valor clipes 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.

5. 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;

6. Text-Transform

Define cómo se presenara 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;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: full-width;

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

8. 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; 
word-break: break-all; 
word-break: keep-all;

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

10. 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;
line-break: auto;
line-break: loose;
line-break: strict;

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.

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

12. 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;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;

13. 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;
hyphens: manual;
hyphens: auto;

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.

14. 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;