Crea tu web, tutor html, css

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, 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 pa´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 compelto con capitalize para que se vea su efecto, la frase está toda en minúscula

color: blue;
text-transform: capitalize;
text-shadow: 5px 12px 3px #666;
por ejemplo este texto tiene sombra
lateralApdo

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 fonts)
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 colapasa los unifcia los espacios en blanco seguido, 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

 

lateralApdo