Aspecto del texto

Una buena parte de cualquier página web es texto. Y CSS3 también puede definir reglas para este elemento de la página, no solo para definir tipo, tamaño o estilo de letra (atributos font-), también para alinearlo, o darle color o aplicarle efectos.

Una vez has elegido el tipo de letra que vas a usar para escribir algo en tu página web, lo siguiente suele ser decidir el color que vas a usar, la alineación, si vas a destaclaro de alguna manera, ... todas estas opciones las puedes controlar con CSS. Las relativas al aspecto del texto son estas:

Propiedad Uso Valor
color Usa el el código de color CSS para darle color al texto Código de color
direction Para idiomnas que van de derecha a izquierda (rtl) o de izquierda a derecha (ltr) ltr, rtl
text-decoration Linea horizontal por encima, debajo o encima (tachado). Se pueden combinar.

none, underline, overline,
line-through

text-shadow Sirve para poner somba al texto Posición y color
unicode-bidi Para páginas con texto bidireccinoal

Al hablar del aspecto vamos a ver que puedes definir su color, hacer que aparezca en mayúsuclas o minúsuclas) y darle efectos como los subrayados y las sombras.Vamos a ver las distintas propiedades y sus efectos:

.destacado{

color: red;

text-transform: uppercase;

text-decoration: overline underline;

}

Esta clase (destacado) daría como resultado:

un texto de color rojo, todo en mayúsculas y con una linea por encima y por debajo

Vamos a ponerle sombra, para esto necesitamos cuatro propiedades:

Distancia X: la distancia horizontal al texto

Distancia Y: distancia vertical al texto

Difuminado: el grado de difuminado de la sombra

Color: el color de sombra. Se usa un código de color CSS, es posible usar un color con una opacidad inferior a 1 para complementar el efecto difuminado.

Apliquemos este estilo, que completo con capitalize para que se vea su efecto, la frase está toda en minúscula

color: #338;

text-transform: capitalize;

text-shadow: 5px 10px 8px #39F;;

por ejemplo este texto tiene sombra

Dimensiones

¿Quéhacer si el texto no cabe en su contenedor?¿como manejar el espaciado?. Aquí agrupo algunas propiedades relativas a dimensiones del texto (no a tamaño de caracteres, que se definene con font-size)

Propiedad Uso Valor
letter-spacing Espacio entre los caracteres Medida
word-spacing Espaciado entre palabras Medida
white-space

Como manejar los espacios y las rupturas de linea

normal nowrap
pre pre-wrap pre-line
line-height Altura de la linea, es un interllineado Medida
text-overflow Especifica que hacer si el texto no cabe en un elemento, si cortarlo o mostrar puntos suspensivos. clip, ellipsis

Mediante el estilo adecuado podemos conseguir efectos sin modificar los caracteres, sino trabajando sobre los espaciados e interlineados del texto. Es tan simple como por ejemplo aumentar el espacio entre caracteres o entre palabras, bien ea para acomodar el texto a un espacio o simplemente para resaltar.

<span style="letter-spacing: 3px">palabra expandida</span>

<span style="letter-spacing: -3px">palabra apretadita</span>

<span style="letter-spacing: normal">espaciado normal (0px)</span>

En esta linea hay una palabra expandida. Los caracteres se separan más de lo habitual.
También puedes comprimirpara tener una palabra apretadita con valores negativos.

De la misma manera podemos separar u unir las palabras de un texto, esta vez la proeiedad usada es word-spacing, que mediante una medida nos separa o acerca plabras entre sí

<span style="word-spacing: 2em">la frase expandida</span>

<span style="word-spacing: -0.2em">la frase apretadita</span>

<span style="word-spacing: normal">la frase normal (0px)</span>

Este es un ejemplo de la frase expandida
Este es un ejemplo de la frase expandida

En el segundo caso nos hemos comido el espacio entre palabras, pero los caracteres del texto siguen igual de separados.

El espaciado de palabras o caracteres se usa más para resaltar que para ajustar el texto en una linea, de esta tarea se encarga la propiedad white-space.

<span style="white-space:nowrap>Estes un texto extenso...</span>

<span style="white-space:pre">Estes un texto extenso...</span>

<span style="white-space:pre-wrap">Estes un texto extenso...</span>

<span style="white-space:pre-line">Estes un texto extenso...</span>

Este es un texto extenso largo que no cabe en el cuadro, ¿qué hacer al llegar al borde?: normal
Este es un texto extenso largo que no cabe en el cuadro, ¿qué hacer al llegar al borde?: nowrap
Este es un texto extenso largo que no cabe en el cuadro, ¿qué hacer al llegar al borde?: pre
Este es un texto extenso largo que no cabe en el cuadro, ¿qué hacer al llegar al borde?: pre-wrap
Este es un texto extenso largo que no cabe en el cuadro, ¿qué hacer al llegar al borde?: pre-line

El texto comienza con una secuencia de 9 espacios y lleva un salto de linea antes de ¿que hacer, no un &lt;br&gt; sino un salto de linea del editor de texto. Estos saltos de linea no son respetados por HTML, que también colapsa (unifica) los espacios en blanco seguidos, a no ser que lo metas todo en un bloque &lt;pre&gt;. Esto mismo hace el valor pre. Mientras que el valor wrap cortar un linea al llegar al margen.

En el texto normal (white-space: normal) el salto de linea no se respeta y los espacios se unifican. El texto se mete dentro de la caja contenedora ajustándolo al alineamiento horizontal del texto y repartiendo la linea adecuadamente.

Para que no corte el texto y siga por encima del borde puedes darle el valor nowrap si no quieres mantener ni los espacios ni el salto de linea, o pre si quieres mantenerlos, copia literal del texto

Las otras opciones serían mantener espacios y slatos de linea pero cortar al llegar al borde, pre-wrap (pre y wrap) o colapsar los espacios en blanco y respetar el salto de linea pre-line.

Los cuadros muestran los compartamientos del texto en cada caso

No obstante aún queda una opción para los textos demasiado largos para un cuadro, el compartamiento se controla mediante text-overflow. Podemos simplemente ocultar el texto sobrante (text-overflow: clip) o agregar puntos suspensivos (text-overflow:ellipsis). Para que este valor actúe necesita que el texto no sea cortado (white-space:nowrap) y que el texto sobrante quede oculto (overflow:hidden)

<span style="white-space: nowrap; overflow: hidden; text-overflow: clip>Estes un texto extenso...</span>

<span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">Estes un texto extenso...</span>

Este es un texto extenso largo que no cabe en el cuadro,¿qué hacer al llegar al borde?: normal
Este es un texto extenso largo que no cabe en el cuadro,¿qué hacer al llegar al borde?: normal

Además de las modificaciones de las fuentes puedes también actuar directametne sobre el texto: mayúsuclas, color, dirección.