Propriété CSS initial-letter

La propriété initial-letter spécifie la taille de la première lettre ainsi que le nombre de lignes qu'elle descend et monte.

Cette propriété est couramment utilisée dans les journaux où la première lettre est plus grande que le reste du contenu.

Cette propriété accepte le mot-clé normal ou deux valeurs <integer> séparées par un espace.

INFO

Les valeurs négatives ne sont pas autorisées.

INFO

Pris en charge par tous les navigateurs modernes.

Valeur initiale	normal
S'applique à	Les pseudo-éléments ::first-letter et le premier enfant de niveau en ligne d'un conteneur de bloc.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	`element.style.initialLetter = "2 1";`

Syntaxe

Syntaxe CSS initial-letter

css

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

Exemple de la propriété initial-letter :

Exemple de code CSS 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 »

Résultat

CSS initial-letter

Valeurs

Valeur	Description
`normal`	Aucun effet initial-letter. Il s'agit de la valeur par défaut.
`<integer> <integer>`	La première valeur spécifie le nombre de lignes que la lettre descend. La deuxième valeur spécifie le nombre de lignes qu'elle monte.
`initial`	Définit la propriété sur sa valeur par défaut.
`inherit`	Hérite de la propriété de son élément parent.

Pratique

Quel est l'objectif de la propriété CSS 'initial-letter' ?

Elle est utilisée pour définir un style spécifique pour la ponctuation dans un texte.Elle est utilisée pour créer un effet de lettrine (lettre tombante ou montante) sur la première lettre d'un paragraphe.Elle est utilisée pour aligner le texte verticalement au sein d'une ligne.Elle est utilisée pour définir la taille et le type d'alignement de la première lettre, lui permettant d'être montante ou tombante.Elle est utilisée pour définir la taille de police d'un paragraphe.

Propriété CSS initial-letter ​

Syntaxe ​

Exemple de la propriété initial-letter : ​

Résultat ​