Line-break - Propriété CSS
Résumé des caractéristiques de la propriété line-break
auto | anywhere | loose | normal | strictautoline-break passe d'une valeur à l'autre sans transition.Schéma syntaxique de line-break.
line-breakLes 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).
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.
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).
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.
$('#id').css('line-break', 'loose');
// ou
$('#id').css('lineBreak', 'loose');
Avec JQuery, lire la valeur calculée de line-break.
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.
Prise en charge par les navigateurs (compatibilité).
line-break utile pour gérer les sauts de ligne dans les langues CJK.line-breakNavigateurs 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
Historique de la propriété line-break.
-
Module CSS - Texte - Niveau 3
Introduction de la propriétéline-break.
27 Janvier 1999Document de travail.
22 Décembre 2020Candidat à la recommandation.
-
Module CSS - Texte - Niveau 4
Pas de changement concernant la définition de la propriétéline-break.22 Septembre 2015Document de travail.
A propos de la gestion des textes, voir aussi.
La propriété line-break est décrite dans la spécification CSS Text Module, 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 :
text-align).