Hyphenate-limit-lines - Propriété CSS

hyphenate-limit-lines

Résumé des caractéristiques de la propriété hyphenate-limit-lines

Description rapide
Définit le nombre maximal de lignes successives se terminant une césure
Statut
Problèmes de compatibilité ⚠
S'applique à
Éléments contenant du texte.
Utilisable sur
HTML
Valeurs prédéfinies
no-limit
Pourcentages
Ne s'appliquent pas.
Valeur initiale
no-limit
Héritée par défaut
Oui.
Type d'animation
Computed value : lors d'une animation, la propriété hyphenate-limit-lines passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Texte
Références (W3C)
Statut du document: WD (document de travail)

Syntaxe de hyphenate-limit-lines (schéma).

hyphenate-limit-lines - Syntax DiagramSyntax diagram of the hyphenate-limit-lines CSS property. See stylescss.free.fr for details. no-limit no-limit integer integerhyphenate-limit-lines:;hyphenate-limit-lines:;
Schéma syntaxique de la propriété hyphenate-limit-lines.
Détails sur les valeurs.

Description des termes utilisés sur le schéma (les termes en gras sont prédéfinis) :

  • integer est un nombre entier positif ou nul.

Description de la propriété hyphenate-limit-lines.

⚠
La propriété hyphenate-limit-lines est encore peu reconnue par les navigateurs.

La propriété hyphenate-limit-lines définit le nombre maximal de lignes consécutives avec césure. On considère en effet qu'il n'est pas esthétique de faire des césures sur des lignes successives trop nombreuses, particulièrement sur du texte justifié, afin d'éviter une succession de tirets en fin des lignes.

L'exemple ci-dessous est une simulation : des tirets de césure (­) ont été positionnés manuellement dans le texte pour simuler l'effet de la propriété hyphenate-limit-lines.

La césure automatique est mainte­nant bien prise en charge par les dif­férents navigateurs. Mais les pro­priétés qui permettent d'ajuster fine­ment les césures ne sont pas suffi­samment reconnues.

Résultat peu esthétique

La césure automatique est mainte­nant bien prise en charge par les différents navigateurs. Mais les pro­priétés qui permettent d'ajuster finement les césures ne sont pas suffi­samment reconnues.

Résultat plus harmonieux
(simulation)

Valeurs pour hyphenate-limit-lines.

  • hyphenate-limit-lines: no-limit;

    Les césures automatiques peuvent se suivre sur un nombre de lignes non limité.

  • hyphenate-limit-lines: 2;

    Avec cette valeur, il n'y aura pas plus de deux lignes successives avec césure.

  • hyphenate-limit-lines: initial; (no-limit) hyphenate-limit-lines: inherit; hyphenate-limit-lines: revert; hyphenate-limit-lines: revertLayer; hyphenate-limit-lines: unset;

    Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Simulateur avec la propriété hyphenate-limit-lines.

hyphenate-limit-lines :
La césure automatique est maintenant bien prise en charge par les différents navigateurs. Mais les propriétés qui permettraient d'ajuster finement les césures ne sont pas suffisamment reconnues.

Support de hyphenate-limit-lines.

Bien que la césure automatique commence à être possible sur les principaux navigateurs, la propriété hyphenate-limit-lines est encore très peu reconnue.

Colonne 1
Support de la césure automatique des mots en fin de ligne et donc de la propriété hyphens.
Colonne 2
Prise en charge par les navigateurs de la propriété hyphenate-limit-lines, pour définir le nombre de lignes consécutives maximal qui se terminent par une césure.

Remarques :

(1) Supporté avec le préfix -ms-.

1
Césure
automatique
2
Propriété
hyphenate-limit-lines
Estimation de la prise en charge globale.
96%
17%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Safari sur IOS

Opéra

Chrome pour Androïd

Firefox pour Androïd

Androïd Brower

Chrome

Safari

Firefox

Edge

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Évolution de la propriété hyphenate-limit-lines.

  • Module CSS - Texte - Niveau 4

    Introduction de la propriété hyphenate-limit-lines dans le niveau 4 de la spécification.
    WD
    22 Septembre 2015
    Document de travail.
    CR
    PR
    REC

Voir aussi, à propos de la gestion des textes.

La césure automatique des textes est une fonctionnalité décrite dans le module CSS Text Module. Vous y trouverez la description de la propriété hyphenate-limit-lines, et des propriétés suivantes :

Propriétés :

⚠
hanging-punctuation
Définit la ponctuation suspendue (caractères autorisés à déborder dans la marge).
hyphenate-character
Définit le caractère qui sera à utiliser comme marque de césure.
⚠
hyphenate-limit-chars
Définit le nombre minimal de caractères pour autoriser la césure d'un mot.
⚠
hyphenate-limit-last
Définit si les césures sont autorisées à la fin d'une colonne, d'une page, etc.
⚠
hyphenate-limit-zone
Définit le nombre maximal d'espaces pour autoriser ou interdire la césure.
hyphens
Définit si les mots peuvent être coupés en fin de ligne. La césure des mots donne une mise en page plus agréable mais peut être gênante dans certains cas.
letter-spacing
Espacement des lettres.
line-break
Définit les ruptures de lignes pour les langues CJK (chinois, japonais, coréen).
⚠
line-padding
Ajoute un espace au début et à la fin des lignes.
overflow-wrap
Gestion des coupures de mots pour les langues CJK et quelques autres.
tab-size
Définit la taille des caractères de tabulation.
text-align
Spécifie comment doit être aligné le texte de l'élément.
⚠
text-align-all
Définit l'alignement des lignes d'un texte (synonyme de text-align).
text-align-last
Définit l'alignement de la dernière ligne des paragraphes.
⚠
text-autospace
Définit l'espace entre les caractères adjacents (utilisable pour les langues CJK).
⚠
text-group-align
text-indent
Définit le retrait de la première ligne des paragraphe (indentation).
⚠
text-justify
Sélectionne la méthode utilisée pour justifier le texte.
✗
text-space-collapse
Définit comment gérer les espaces et les espaces multiples dans le texte.
✗
text-space-trim
Définit si les espaces au début et à la fin du texte de l'élément doivent être conservés ou supprimés.
⚠
text-spacing
⚠
text-spacing-trim
Definit l'espacement autour des caractères de ponctuation CJK.
text-transform
Casse du texte (minuscules, majuscules...).
⚠
text-wrap
Définit la gestion des retours à la ligne du texte.
text-wrap-mode
Définit si les retours à la ligne sont autorisés.
text-wrap-style
Définit comment les saut de ligne vont se faire.
white-space
Définit comment sont restitués les espaces multiples et les retours chariot.
white-space-collapse
Définit comment les espaces successifs et les retours à la ligne doivent être traités.
⚠
white-space-trim
Définit si comment le navigateur doit supprimer les espaces réductibles.
⚠
word-boundary-detection
Définit quelle logique le navigateur doit utilier pour identifier les limites des mots.
✗
word-boundary-expansion
Substitue certains caractères de séparation de mots par d'autres.
word-break
Coupure des mots longs.
⚠
word-space-transform
Normalise les caractères d'espacement (écritures CJK).
word-spacing
Permet d'ajuster l'espacement des mots.
word-wrap
Coupure des mots pour les langues CJK et quelques autres.
⚠
wrap-after
Autorise ou non les sauts de lignes après la boite.
⚠
wrap-before
Autorise ou non les sauts de lignes avant la boite.
⚠
wrap-inside
Autorise ou non les sauts de lignes dans la boite.