Propriété CSS initial-letter
Use initial-letter CSS property which allows to select the first letter and specify the number of lines it should occupy. Learn about property values and see examples.
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
initial-letter: normal | <integer> <integer>;Exemple de la propriété initial-letter :
Exemple de code CSS initial-letter
<!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>Résultat
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
Pratique
Quel est l'objectif de la propriété CSS 'initial-letter' ?