Text-wrap-style - Propriété CSS
Résumé des caractéristiques de la propriété text-wrap-style
auto | balance | stable | prettytext-wrap-style passe d'une valeur à l'autre sans transition.Schéma de la syntaxe de text-wrap-style.
text-wrap-style.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Description de la propriété text-wrap-style.
text-wrap-style définit comment se font les sauts à la ligne dans le contexte d'une série de boites du type inline... (inline-block,
inline-table, inline-flex, etc).
Cette propriété ne concerne pas les retours à la ligne dans un flex-box, qui sont gérés par la propriété flex-wrap.
Mais vous pouvez vous reportez aux propriétés ci-dessous pour en savoir plus :
text-wrap-mode: Définit si les retours à la ligne sont autorisés.wrap-before: Autorise ou non les sauts de lignes avant la boite.wrap-after: Autorise ou non les sauts de lignes après la boite.wrap-inside: Autorise ou non les sauts de lignes dans la boite.
Valeurs pour text-wrap-style.
- text-wrap-style: auto;
Le navigateur choisit lui-même l'algorithme à utiliser pour couper les lignes. Il s'agit généralement de l'algorithme le plus rapide. Il s'agit de la valeur initiale de la propriété.
Cette boîte contient du texte avec des sauts de ligne dus à une largeur trop étroite. Le navigateur choisit l'algorithme à utiliser. - text-wrap-style: balance;
Le navigateur tente d'équilibrer la longueur des lignes. Cette valeur est à préférer pour les légendes
Le navigateur traite cette valeur comme
autolorsqu'il y a plus de 10 lignes.Cette boîte contient du texte avec des sauts de ligne dus à une largeur trop étroite. Le navigateur gère les sauts de ligne pour qu'elles soient le plus égale possible. - text-wrap-style: stable;
Le navigateur choisir l'algorithme qui suppose le moins de modifications possible lorsque le contenu est modifié.
Cette boîte contient du texte avec des sauts de ligne dus à une largeur trop étroite. Le navigateur gère les sauts de ligne pour que les modifications de contenu aient le moins d'impact possible. - text-wrap-style: pretty; ⚠
Le navigateur doit biaiser pour une meilleure disposition et une vitesse élevée, et doit prendre en compte plusieurs lignes, lors de la prise de décisions de retours.
Cette boîte contient du texte avec des sauts de ligne dus à une largeur trop étroite. Le navigateur trouve un compromis entre la rapidité et l'esthétique des lignes. - text-wrap-style: initial; (auto) text-wrap-style: inherit; text-wrap-style: revert; text-wrap-style: revertLayer; text-wrap-style: unset;
Consultez les pages suivantes pour plus de détails :
initial,inherit,revert,revert-layer,unset.
Exemple d'animation de text-wrap-style.
Le propriété text-wrap-style peut être animée de façon "discrète", ce qui veut dire que le passage d'une valeur à l'autre se fait brutalement.
text-wrap-style.
Accéder à la propriété text-wrap-style par programme.
Avec Javascript, modifier la valeur de text-wrap-style.
En Javascript, voici comment modifier la valeur de text-wrap-style.
On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case,
et une autre syntaxe avec la notation en camel-case.
let el = document.getElementById('id');
el.style['text-wrap-style'] = 'balance';
// ou
let el = document.getElementById('id');
el.style.textWrapStyle = 'balance';
Avec Javascript, lire la valeur de text-wrap-style.
La propriété doit avoir été affectée directement à l'élément lui-même via son attribut style, et non pas en passant par un sélecteur CSS.
let el = document.getElementById('id');
let value = el.style['text-wrap-style'];
// ou
let el = document.getElementById('id');
let value = el.style.textWrapStyle;
Avec Javascript, lire la valeur calculée de text-wrap-style.
La valeur calculée est celle qui résulte de la cascade des héritages, ou à défaut, la valeur calculée est la valeur initiale (auto pour
text-wrap-style).
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('text-wrap-style');
Avec JQuery, modifier la valeur de text-wrap-style.
$('#id').css('text-wrap-style', 'balance');
// ou
$('#id').css('textWrapStyle', 'balance');
Avec Javascript, lire la valeur de text-wrap-style.
let value = $('#id').css('text-wrap-style');
Autres exemples de code.
D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété text-wrap-style et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée. Dans le cas de text-wrap-style cela ne fera pas de différences.
Exemple interactif avec la propriété text-wrap-style.
Le simulateur agit sur un simple bloc de texte (en premier), et sur un conteneur regroupant plusieurs élément ayant reçu display:inline-block;.
Remarque : sur Firefox 
le fonctionnement semble incorrect pour la valeur balance dans le cas d'une suite de blocs inline.
text-wrap-style.
Compatibilité des navigateurs avec text-wrap-style.
La propriété text-wrap-style est maintenant bien reconnue pas les principaux navigateurs, même si le traitement de la valeur pretty
laisse encore à désirer.
text-wrap-style qui définit comment les retours à la ligne se font.pretty pour la propriété text-wrap-style.text-wrap-styleprettyNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Opéra
Chrome
Safari
Firefox
Safari sur IOS
Edge
Chrome pour Androïd
Samsung Internet
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Histoire de la propriété text-wrap-style.
-
Module CSS - Texte - Niveau 4
Introduction de la propriététext-wrap-style.
22 Septembre 2015Document de travail.
Voir aussi, à propos des manipulations de texte.
La propriété text-wrap-style fait partie du module CSS Text Module.
Les définitions suivantes sont également décrites dans ce même module.
Propriétés :
text-align).