hanging-punctuation
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
La propriété CSS hanging-punctuation indique si un signe de ponctuation se situant au début ou à la fin d'une ligne de texte doit rester sur cette ligne, quitte à sortir de la boîte qui représente la ligne.
Syntaxe
/* Valeurs avec un mot-clé */
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: allow-end;
/* Valeurs avec deux mots-clés */
hanging-punctuation: first allow-end;
hanging-punctuation: first last;
hanging-punctuation: last allow-end;
/* Valeurs avec trois mots-clés */
hanging-punctuation: first allow-end last;
/* Valeurs globales */
hanging-punctuation: inherit;
hanging-punctuation: initial;
hanging-punctuation: revert;
hanging-punctuation: revert-layer;
hanging-punctuation: unset;
La propriété hanging-punctuation peut être définie avec une, deux ou trois valeurs séparées par des espaces.
Valeurs
none-
Aucun caractère ne reste suspendu.
first-
Une parenthèse ou des guillemets ouvrants au début de la première ligne formatée d'un élément restent suspendus. Cela s'applique :
- à tous les caractères des catégories Unicode Ps (angl.), Pf (angl.), Pi (angl.)
- aux guillemets
U+0027APOSTROPHE (') etU+0022GUILLEMET (").
last-
Une parenthèse ou des guillemets fermants à la fin de la dernière ligne formatée d'un élément restent suspendus. Cela s'applique :
- à tous les caractères des catégories Unicode Pe (angl.), Pf (angl.), Pi (angl.)
- aux guillemets
U+0027APOSTROPHE (') etU+0022GUILLEMET (").
allow-end-
Un point ou une virgule en fin de ligne reste suspendu si la justification ne permet pas de le placer avant.
Les points et virgules autorisés à rester suspendus incluent :
U+002C, VIRGULEU+002E, POINTU+060C, VIRGULE ARABEU+06D4, POINT ARABEU+3001, VIRGULE IDÉOGRAPHIQUEU+3002, POINT IDÉOGRAPHIQUEU+FF0C, VIRGULE PLEINE LARGEURU+FF0E, POINT PLEINE LARGEURU+FE50, PETITE VIRGULEU+FE51, PETITE VIRGULE IDÉOGRAPHIQUEU+FE52, PETIT POINTU+FF61, POINT IDÉOGRAPHIQUE DEMI-LARGEURU+FF64, VIRGULE IDÉOGRAPHIQUE DEMI-LARGEUR
Les agents utilisateur peuvent inclure des caractères supplémentaires.
Définition formelle
| Valeur initiale | none |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
hanging-punctuation =
none |
[ first || [ force-end | allow-end ] || last ]
Exemples
Définir la suspension des guillemets ouvrants et fermants
HTML
<p>
« Pendant un instant, rien ne se produisit. Puis, après une seconde ou
deux, rien ne continua à se produire. »
</p>
<p class="hanging">
« Pendant un instant, rien ne se produisit. Puis, après une seconde ou
deux, rien ne continua à se produire. »
</p>
<p class="hanging right">
« Pendant un instant, rien ne se produisit. Puis, après une seconde ou
deux, rien ne continua à se produire. »
</p>
CSS
p {
width: 15em;
border: 1px solid #cccccc;
font-size: 2rem;
font-style: italic;
margin: 1em;
}
p.hanging {
hanging-punctuation: first last;
}
p.right {
text-align: right;
}
Résultat
Spécifications
| Specification |
|---|
| CSS Text Module Level 3 # hanging-punctuation-property |