line-break - Propriété CSS
Résumé des caractéristiques de la propriété line-break
auto
| anywhere
| loose
| normal
| strict
auto
line-break
passe d'une valeur à l'autre sans transition.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ù.
- line-break:
initial
; line-break:inherit
; line-break:revert
; line-break:revert-layer
; line-break:unset
;La valeur initiale est :
.auto
Manipulation de la propriété line-break
par programme.
Dans les exemples de code ci-après, le paramètre el
représente l'élément de la page sur lequel on souhaite travailler.
Modifier la valeur de line-break
en Javascript.
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).
function setLineBreak(el) {
el.style['line-break']='loose';
// ou
el.style.lineBreak='loose';
}
Lire en Javascript 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.
function getLineBreak(el) {
alert(el.style['line-break']);
// ou
alert(el.style.lineBreak);
}
Lire la valeur calculée de line-break
en Javascript.
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 règles de priorité).
function getCalcLineBreak(el) {
alert(window.getComputedStyle(el).getPropertyValue('line-break'));
}
Modifier la valeur de la propriété line-break
avec JQuery.
Comme en Javascript, l'écriture du nom de la propriété peut se faire soit en kebab-case
, soit en camel-case
.
function setLineBreak(el) {
$(el).css('line-break','strict');
// ou
$(el).css('lineBreak','strict');
}
Lire la valeur calculée de la propriété line-break
avec JQuery.
function getCalcLineBreak(el) {
alert($(el).css('line-break'));
// ou
alert($(el).css('lineBreak'));
}
Simulateur.
Prise en charge par les navigateurs (compatibilité).
line-break
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que line-break
.
Les spécifications CSS éditées par le W3C sont organisées en modules. line-break
fait partie du Module CSS - Texte (CSS Text Module). Les définitions suivantes sont également décrites dans ce même module.