CSS: propiedad de sangría de texto

Los datos expuestos en este blog, son solo de índole informativo. Por favor realiza siempre una copia de seguridad antes de realizar cualquier cambio en tu proyecto.

CSS: propiedad de sangría de texto

Este tutorial de CSS explica cómo usar una propiedad de CSS llamada guion de texto Con sintaxis y ejemplos.

describir

La propiedad text-indent de CSS define la cantidad de sangría antes de la primera línea del texto del elemento.

sintaxis

La sintaxis de la propiedad CSS text-indent es:

text-indent: value;

parámetro o parámetro

valor

La cantidad de espacio horizontal (es decir, sangría) antes de la primera línea del texto del elemento. Puede ser uno de los siguientes:

valor describir
estable Un valor fijo en píxeles, em, etc.
p {sangría de texto: 40px;}
p {sangría de texto: 3em; }
porcentaje valor porcentual
p { guión de texto: 10%; }

notas

  • La propiedad text-indent le permite definir la cantidad de espacio horizontal (es decir, de izquierda a derecha) que aparecerá antes de la primera línea del texto del elemento.
  • Cuando el valor se proporciona como un porcentaje, es relativo al ancho del bloque que lo contiene.

Compatibilidad del navegador

La propiedad text-indent de CSS tiene soporte básico para los siguientes navegadores:

  • Aleación de cromo
  • Firefox (Geco)
  • Navegador de Internet (IE)
  • ópera
  • Safari (WebKit)

ejemplo

Discutiremos la propiedad de sangría de texto a continuación, explorando ejemplos de cómo usarla en CSS.

usar valor fijo

Veamos un ejemplo de sangría de texto CSS donde proporcionamos sangría de texto como un valor fijo en píxeles.

CSS se ve así:

div { background: lightyellow; padding: 10px; }

p { text-indent: 25px; }

HTML se ve así:

<div>
  <p>TechOnTheNet.com has been providing helpful references, how-to's and FAQs since 2003.</p>
  <p>CheckYourMath.com has answers to your every day Math questions.</p>
</div>

El resultado se verá así:

En este ejemplo de sangría de texto CSS, vamos a

La sangría de texto de la etiqueta se establece en 25 px. Esto aplicará una sangría de 25 píxeles a la primera línea de texto de cada párrafo.

También podemos representar la sangría del texto como un valor fijo en em. Entonces, usando el mismo HTML, podemos modificar nuestro CSS de la siguiente manera:

div { background: lightyellow; padding: 10px; }

p { text-indent: 5em; }

El resultado ahora se ve así:

En este ejemplo de sangría de texto CSS, vamos a

El marcado se establece en una sangría de texto de 5 em, que se muestra con una sangría ligeramente mayor que 25 px. La sangría del texto se aplica a la primera línea de texto de cada párrafo.

porcentaje de uso

Veamos un ejemplo de sangría de texto CSS donde proporcionamos sangría de texto como un porcentaje.

CSS se ve así:

div { background: lightyellow; padding: 10px; }

p { text-indent: 5%; }

HTML se ve así:

<div>
  <p>TechOnTheNet.com has been providing helpful references, how-to's and FAQs since 2003.</p>
  <p>CheckYourMath.com has answers to your every day Math questions.</p>
</div>

El resultado se verá así:

En este ejemplo de sangría de texto CSS, vamos a

La sangría de texto de la etiqueta se establece en 5 %, lo que significa que la sangría de texto será del 5 % del ancho del contenedor de la primera línea de texto de cada párrafo del contenedor.