Line-break - Propriété CSS

line-break

Résumé des caractéristiques de la propriété line-break

Description rapide
Définit les ruptures de lignes pour les langues CJK (chinois, japonais, coréen).
Statut
Standard
S'applique à
Éléments contenant du texte.
Utilisable sur
HTML
Valeurs prédéfinies
auto | anywhere | loose | normal | strict
Pourcentages
Ne s'appliquent pas.
Valeur initiale
auto
Héritée par défaut
Oui.
Type d'animation
Discrète : lors d'une animation, la propriété line-break passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Texte
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de line-break.

Line-break property - Syntax diagramSyntax diagram of the line-break CSS property. See stylescss.free.fr for details. auto auto loose loose normal normal strict strict anywhere anywhereline-break:;line-break:;
Schéma syntaxique de la propriété line-break
Les liens du schéma donnent accès à plus de détails

Description de la propriété line-break.

line-break concerne uniquement les textes en langue asiatiques, telles que le chinois, le japonais ou le coréen (langues CJK).

La propriété line-break définit quelles règles utiliser pour positionner les sauts de ligne (règles de rupture).

Syntaxes pour line-break.

  • line-break: auto;

    Le navigateur décide quelles sont les règles de rupture à utiliser. Il peut aussi adapter ces règles en fonction de la longueur des lignes.

    文本为中文々换行符由样〜式决定
  • line-break: normal;

    Les sauts de ligne sont gérés en fonction des règles spécifiques à la langue.

    文本为中文々换行符由样〜式决定
  • line-break: loose;

    Les règles de rupture choisies sont adaptées aux lignes courtes.

    文本为中文々换行符由样〜式决定
  • line-break: strict;

    Utilise l'ensemble des règles de rupture le plus strict.

    文本为中文々换行符由样〜式决定
  • line-break: anywhere;

    Les sauts de ligne peuvent se produire n'importe où.

    文本为中文々换行符由样〜式决定

Valeurs communes à toutes les propriétés :

line-break: initial (auto) line-break: inherit line-break: revert line-break: revertLayer line-break: unset

Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Manipulation de la propriété line-break par programme.

Avec Javascript, modifier la valeur de line-break.

En Javascript, modifier la valeur de line-break peut se faire suivant deux syntaxes :

  • Le nom de la propriété écrit en kebab-case (un tiret pour séparer les mots).
  • Le nom de la propriété écrit en camel-case (une majuscule pour séparer les mots).
Javascript
let el = document.getElementById('id'); el.style['line-break'] = 'loose'; // ou let el = document.getElementById('id'); el.style.lineBreak = 'loose';

Avec Javascript, lire la valeur de line-break.

Cet exemple de code retrouve la valeur de line-break si cette dernière a été affectée dans le code HTML, via l'attribut style de l'élément. Les valeurs affectées dans la feuille de styles, via un sélecteur CSS ne sont pas concernées.

Javascript
let el = document.getElementById('id'); let value = el.style['line-break']; // ou let el = document.getElementById('id'); let value = el.style.lineBreak;

Avec Javascript, lire la valeur calculée de line-break.

La valeur calculée est celle qui résulte de l'évaluation de la cascade des héritages et des règles de priorité en CSS {voir Les priorités).

Javascript
let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('line-break');

Avec JQuery, modifier la valeur de line-break.

Comme en Javascript, l'écriture du nom de la propriété peut se faire soit en kebab-case, soit en camel-case.

JQuery

$('#id').css('line-break', 'loose');
// ou
$('#id').css('lineBreak', 'loose');

Avec JQuery, lire la valeur calculée de line-break.

JQuery
let value = $('#id').css('line-break');

Testez vous-même.

La valeur affectée par les boutons ci-dessous est restituée telle quelle par le bouton "Valeur appliquée" ou telle qu'elle est enregistrée par le bouton "Valeur calculée" (ce qui, dons le cas de line-break est la même chose).

Exemple interactif avec la propriété line-break.

line-break :
從樣式設置格式具有許多優點，尤其是將數據和表示形式分開

Prise en charge par les navigateurs (compatibilité).

Colonne 1
Traitement correct de la propriété line-break utile pour gérer les sauts de ligne dans les langues CJK.
1
Propriété
line-break
Estimation de la prise en charge globale.
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

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

Historique de la propriété line-break.

  • Module CSS - Texte - Niveau 3

    Ce module de spécification niveau 3 définit les contrôles typographiques de CSS, c'est à dire les règles de transformation d'un texte source en texte formaté, avec retours à la ligne. De nombreuses propriétés contrôlent l'alignement et la justification des textes, les règles de césure, l'espacements des caractères ou des mots, le regroupement des espaces successifs, etc.
    Ces règles sont souvent dépendantes du langage, il est donc conseillé aux auteurs de spécifier la langue dans lequel le texte est écrit (attribut lang pour le HTML). Il peut même être nécessaire de préciser le système d'écriture utilisé en particulier pour les langues coréenne, japonaise, mongolienne, etc. A défaut la mise en forme typographique sera moins fine.

    Concernant line-break. Introduction de la propriété line-break.
    WD
    27 Janvier 1999
    Document de travail.
    CR
    22 Décembre 2020
    Candidat à la recommandation.
    PR
    REC

  • Module CSS - Texte - Niveau 4

    Ce niveau 4 de ce module de spécification décrit les propriétés qui agissent sur les règles typographiques : alignement et justification du texte, espacement des mots ou des caractères, règles de césure, etc.
    Par rapport au niveau 3, plusieurs nouvelles propriétés ont été ajoutées, en particulier concernant les ruptures en fin de lignes, les césures, les espacements avant et/ou après le texte, etc.

    Concernant line-break. Pas de changement concernant la définition de la propriété line-break.
    WD
    22 Septembre 2015
    Document de travail.
    CR
    PR
    REC

A propos de la gestion des textes, voir aussi.

La propriété line-break est décrite dans la spécification Module CSS - Texte, de même que tout ce qui concerne la gestion des textes (alignement, espacements, césure, débordement, etc...). Les propriétés suivantes figurent également dans ce module de spécification :

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-lines
Définit le nombre maximal de lignes successives se terminant une césure
⚠
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-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 : espaces entre les mots ou entre les lettres.
✗
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
Propriété résumée pour text-spacing-trim et text-autospace. regroupe les informations d'espacement des caractères pour les langues CJK.
⚠
text-spacing-trim
Definit l'espacement autour des caractères de ponctuation CJK.
text-transform
Définit la casse du texte (minuscules, majuscules, petites capitales...).
⚠
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.