hyphenate-character
Baseline
2023
Newly available
Depuis September 2023, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
La propriété CSS hyphenate-character définit le caractère (ou la chaîne de caractères) utilisé à la fin d'une ligne avant une coupure par trait d'union.
Les traits d'union automatiques et conditionnels sont affichés selon la valeur définie pour hyphenate-character.
Exemple interactif
hyphenate-character: auto;
hyphenate-character: "=";
hyphenate-character: "—";
<section id="default-example">
<p id="example-element">Un mot extraordinairement long en français !</p>
</section>
#example-element {
border: 2px dashed #999999;
font-size: 1.5rem;
text-align: left;
width: 7rem;
hyphens: auto;
}
Syntaxe
hyphenate-character: <string>;
hyphenate-character: auto;
La valeur définit soit la chaîne de caractères à utiliser à la place d'un trait d'union, soit indique que l'agent utilisateur doit choisir une chaîne adaptée selon les conventions typographiques du langage de contenu (valeur par défaut).
Valeurs
<string>-
La chaîne de caractères (
<string>) à utiliser à la fin de la ligne avant une coupure par trait d'union. L'agent utilisateur peut tronquer cette valeur si trop de caractères sont utilisés. auto-
L'agent utilisateur choisit une chaîne adaptée selon les conventions typographiques du langage de contenu. Il s'agit de la valeur par défaut de la propriété, et il n'est nécessaire de la définir explicitement que pour surcharger une valeur héritée différente.
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | tous les éléments |
| Héritée | oui |
| Valeur calculée | comme spécifié |
| Type d'animation | discrète |
Syntaxe formelle
hyphenate-character =
auto |
<string>
Exemples
Cet exemple montre deux blocs de texte identiques qui ont hyphens définie pour garantir qu'ils se coupent où cela est nécessaire, y compris sur les coupures conditionnelles (créées avec ­).
Le premier bloc a la valeur du trait d'union modifiée en symbole égal (=).
Le second bloc n'a pas de valeur définie pour hyphenate-character, ce qui équivaut à hyphenate-character: auto pour les agents utilisateur qui prennent en charge cette propriété.
HTML
<dl>
<dt><code>hyphenate-character: "="</code></dt>
<dd id="string" lang="en">Superc­alifragilisticexpialidocious</dd>
<dt><code>hyphenate-character n'est pas défini</code></dt>
<dd lang="en">Superc­alifragilisticexpialidocious</dd>
</dl>
CSS
dd {
width: 90px;
border: 1px solid black;
hyphens: auto;
}
dd#string {
-webkit-hyphenate-character: "=";
hyphenate-character: "=";
}
Résultat
Spécifications
| Specification |
|---|
| CSS Text Module Level 4 # propdef-hyphenate-character |
Compatibilité des navigateurs
Voir aussi
- Propriétés CSS associées :
hyphens,overflow-wrap.