Propriété CSS hanging-punctuation
La propriété hanging-punctuation spécifie si une ponctuation doit être placée en retrait au début ou à la fin de la ligne de texte.
La ponctuation en retrait est utilisée avec du texte entièrement justifié et contrôle l'alignement de toutes les lignes d'un paragraphe lorsqu'elle est appliquée à la fin des lignes.
| Valeur initiale | none |
|---|---|
| S'applique à | Tous les éléments. |
| Héritée | Oui. |
| Animable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.hangingPunctuation = "last"; |
Syntaxe
Syntaxe de la propriété CSS hanging-punctuation
css
hanging-punctuation: none | first | last | allow-end | force-end | initial | inherit;Exemple de la propriété hanging-punctuation :
Exemple de la propriété CSS hanging-punctuation avec la valeur first
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the 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>Hanging-punctuation property example</h2>
<blockquote>"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s".</blockquote>
</body>
</html>Résultat
Valeurs
| Valeur | Description |
|---|---|
| none | La ponctuation en retrait n'est pas appliquée. Il s'agit de la valeur par défaut de cette propriété. |
| first | Un signe de ponctuation sera placé en retrait à l'extérieur du bord de départ de la première ligne. |
| last | Un signe de ponctuation sera placé en retrait à l'extérieur du bord de fin de la dernière ligne. |
| allow-end | Un signe de ponctuation sera placé en retrait à l'extérieur du bord de fin d'une ligne s'il ne peut pas s'y insérer autrement avant la justification. |
| force-end | Un signe de ponctuation sera placé en retrait à l'extérieur du bord de fin de toutes les lignes. Si la justification est activée sur cette ligne, cela forcera la ponctuation à se placer en retrait. |
Practice
Que fait la propriété de ponctuation en retrait (hanging punctuation) en CSS ?