::first-line
Baseline
Widely available
*
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
Le pseudo-élément CSS ::first-line applique la décoration à la première ligne d'un élément. La quantité de texte sur la première ligne dépend de nombreux facteurs, comme la largeur des éléments ou du document, mais aussi de la taille du texte. Comme tous les pseudo-éléments, les sélecteurs contenant ::first-line ne ciblent pas un élément HTML réel.
Exemple interactif
p::first-line {
font-size: 1.2rem;
font-weight: bold;
text-decoration: underline;
}
<p>
Dans les eaux chaudes des océans du monde entier, vous pouvez être témoin d'un
spectacle étrange : un poisson bondissant hors de l'eau et planant à des
dizaines de mètres avant de retourner dans les profondeurs de l'océan. Les
premiers marins méditerranéens pensaient que ces poissons volants revenaient
sur le rivage la nuit pour dormir et ont donc appelé cette famille de poissons
marins Exocoetidae.
</p>
Les effets de ::first-line sont limités par la longueur et le contenu de la première ligne de texte dans l'élément. La longueur de la première ligne dépend de nombreux facteurs, notamment la largeur de l'élément, la largeur du document et la taille de la police du texte. ::first-line n'a aucun effet lorsque le premier enfant de l'élément, qui serait la première partie de la première ligne, est un élément de bloc en ligne, tel qu'un tableau en ligne.
Note :
Le standard Sélecteurs de Niveau 3 (angl.) a introduit la notation à double deux-points (::) pour distinguer les pseudo-éléments des pseudo-classes à deux points simples (:). Les navigateurs acceptent à la fois ::first-line et :first-line, qui a été introduit dans CSS2.
Aux fins de background, le pseudo-élément ::first-line est comme un élément de niveau en ligne, ce qui signifie que dans une première ligne justifiée à gauche, l'arrière-plan peut ne pas s'étendre jusqu'à la marge droite.
Propriétés autorisées
Seul un petit sous-ensemble de propriétés CSS peut être utilisé avec le pseudo-élément ::first-line :
- Toutes les propriétés liées à la police :
font,font-kerning,font-style,font-variant,font-variant-numeric,font-variant-position,font-variant-east-asian,font-variant-caps,font-variant-alternates,font-variant-ligatures,font-synthesis,font-feature-settings,font-language-override,font-weight,font-size,font-size-adjust,font-stretchetfont-family - Toutes les propriétés liées à l'arrière-plan :
background-color,background-clip,background-image,background-origin,background-position,background-repeat,background-size,background-attachmentetbackground-blend-mode - La propriété
color word-spacing,letter-spacing,text-decoration,text-transformetline-heighttext-shadow,text-decoration,text-decoration-color,text-decoration-line,text-decoration-styleetvertical-align.
Syntaxe
::first-line {
/* ... */
}
Exemples
Mise en forme de la première ligne d'un paragraphe
HTML
<p>
Les styles ne seront appliqués qu'à la première ligne de ce paragraphe.
Ensuite, tout le texte sera formaté normalement. Vous voyez ce que je veux
dire ?
</p>
<span>
La première ligne de ce texte ne bénéficiera pas d'un style particulier, car
il ne s'agit pas d'un élément de niveau bloc.
</span>
CSS
::first-line {
color: blue;
font-weight: bold;
/* AVERTISSEMENT : NE PAS UTILISER CES ÉLÉMENTS */
/* De nombreuses propriétés ne sont pas valides dans les pseudo-éléments
::first-line */
margin-left: 20px;
text-indent: 20px;
}
Résultat
Mise en forme de la première ligne d'un élément de texte SVG
Dans cet exemple, nous stylisons la première ligne d'un élément SVG <text> en utilisant le pseudo-élément ::first-line.
Note : Au moment de la rédaction, cette fonctionnalité a un support limité.
HTML
<svg viewBox="0 0 320 150">
<text y="20">Voici un paragraphe en anglais
qui est divisé en plusieurs lignes
dans le code source afin qu'il puisse
être plus facilement lu et modifié
dans un éditeur de texte.
</text>
</svg>
CSS
Dans cet exemple, nous utilisons la propriété CSS white-space pour faire en sorte que l'élément SVG <text> se divise en plusieurs lignes. Nous sélectionnons ensuite la première ligne à l'aide du pseudo-élément ::first-line.
text {
white-space: break-spaces;
}
text::first-line {
fill: blue;
font-weight: bold;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Pseudo-Elements Module Level 4 # first-line-pseudo |
Compatibilité des navigateurs
Chargement…