w3docs logo

Propriété CSS hanging-punctuation

La propriété hanging-punctuation spécifie si un signe de ponctuation si un signe de ponctuation doit être suspendu au début ou à la fin de la ligne d'un texte.

Hanging punctuation est utilisée avec un texte pleinement justifié et contrôle l'alignement de toutes les lignes dans un paragraphe de texte lors qu'elle est utilisée à la fin des lignes.

Seul Safari supporte cette propriété.
Valeur initiale none
Appliquée à Tous les éléments.
Héritée Oui.
Animable Non.
Version CSS3
Syntaxe DOM object.style.hangingPunctuation = "last";

Syntaxe

hanging-punctuation: none | first | last | allow-end | force-end | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      blockquote {
      font-style: normal;
      font-size: 25px;
      width: 20em;
      border-left: 1px solid #000;
      padding: 3rem 0;
      hanging-punctuation: first;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété hanging-punctuation</h2>
    <blockquote>"Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte".</blockquote>
  </body>
</html>

Valeurs

Valeur Description
none Aucun signe de ponctuation sera placé. C'est la valeur initiale de cette propriété.
first Un signe de ponctuation sera suspendu en dehors du bord de départ de la première ligne.
last Un signe de ponctuation sera suspendu en dehors du bord de la fin de la première ligne.
allow-end Un signe de ponctuation sera suspendu en dehors du bord de la fin d'une ligne s'il ne correspond pas avant la justification.
force-end Un signe de ponctuation sera suspendu en dehors du bord de la fin de toutes les lignes. Si la justification est activée sur cette ligne, la ponctuation sera suspendue.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

chrome edge firefox safari opera
✕ ✕ ✕ 10.0+ ✕

Pratiquez vos connaissances

Qu'est-ce que la ponctuation suspendue ('hanging punctuation') en CSS et à quoi cela sert-il?
Trouvez-vous cela utile?