Propiedad CSS initial-letter

La propiedad initial-letter especifica el tamaño de la primera letra y el número de líneas que desciende y asciende.

Esta propiedad aparece en periódicos donde la primera letra es más grande que el resto del contenido.

Esta propiedad acepta la palabra clave normal o dos valores <integer> separados por un espacio.

INFO

No se permiten valores negativos.

INFO

Compatible con todos los navegadores modernos.

Valor inicial	normal
Se aplica a	Pseudo-elementos ::first-letter y el primer hijo de nivel en línea de un contenedor de bloque.
Heredable	No.
Animable	No.
Versión	CSS3
Sintaxis DOM	`element.style.initialLetter = "2 1";`

Sintaxis

Sintaxis CSS de initial-letter

css

initial-letter: normal | <integer> <integer>;

Ejemplo de la propiedad initial-letter:

Ejemplo de código CSS de initial-letter

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Slabo 27px';
        font-size: 1.5em;
        line-height: 1.5;
        padding: 40px 0;
      }
      article {
        width: 80%;
      }
      .example::first-letter {
        -webkit-initial-letter: 2 1;
        initial-letter: 2 1;
        color: #8ebf42;
        font-weight: bold;
        margin-right: .60em;
      }
    </style>
  </head>
  <body>
    <article class="example">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </article>
  </body>
</html>

Try it Yourself »

Resultado

CSS initial-letter

Valores

Valor	Descripción
`normal`	Sin efecto initial-letter. Este es el valor predeterminado.
`<integer> <integer>`	El primer valor especifica cuántas líneas desciende la letra. El segundo valor especifica cuántas líneas asciende.
`initial`	Establece la propiedad en su valor predeterminado.
`inherit`	Hereda la propiedad de su elemento padre.

Práctica

¿Cuál es el propósito de la propiedad CSS 'initial-letter'?

Se utiliza para establecer un estilo específico para la puntuación en un texto.Se utiliza para crear un efecto de capitular o letra capital en la primera letra de un párrafo.Se utiliza para alinear el texto verticalmente dentro de una línea.Se utiliza para establecer el tamaño y el tipo de alineación de la primera letra, permitiendo que se eleve o descienda.Se utiliza para establecer el tamaño de fuente de un párrafo.

Propiedad CSS initial-letter ​

Sintaxis ​

Ejemplo de la propiedad initial-letter: ​

Resultado ​