Text-wrap - Propriété CSS

text-wrap

Résumé des caractéristiques de la propriété `text-wrap`

Description rapide

Définit la gestion des retours à la ligne du texte.

Statut

Problèmes de compatibilité ⚠

S'applique à

Éléments contenant du texte.

Utilisable sur

HTML

Valeurs prédéfinies

wrap auto | wrap balance | wrap stable | wrap pretty | nowrap

Pourcentages

Ne s'appliquent pas.

Valeur initiale

wrap

Héritée par défaut

Oui.

Type d'animation

Discrète : lors d'une animation, la propriété text-wrap passe d'une valeur à l'autre sans transition.

Module W3C

Module CSS - Texte

Références (W3C)

CSS Text Module Level 4

Statut du document: WD (document de travail)

Schéma syntaxique de `text-wrap`.

Schéma syntaxique de la propriété text-wrap.
Les liens du schéma donnent accès à plus de détails.

Description de la propriété `text-wrap`.

text-wrap est une propriété résumée pour les deux propriétés ci-dessous. Si une des valeurs n'est pas spécifiée, elle est fixée à sa valeur initiale.

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.

Reportez-vous également aux propriétés ci-dessous :

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.
white-space : Définit comment sont restitués les espaces multiples et les retours chariot.

Valeurs pour `text-wrap`.

text-wrap: wrap;

Les retours à la ligne sont autorisés. Cette valeur est équivalente à wrap auto.

Les passeports ne servent jamais qu'à gêner les honnêtes gens et à favoriser la fuite des coquins. ⁽¹⁾

(1) Jules Verne
text-wrap: nowrap;

Les retours à la ligne sont interdits.

Les passeports ne servent jamais qu'à gêner les honnêtes gens et à favoriser la fuite des coquins. ⁽¹⁾
text-wrap: wrap auto; text-wrap: 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é.

Les passeports ne servent jamais qu'à gêner les honnêtes gens et à favoriser la fuite des coquins. ⁽¹⁾
text-wrap: wrap balance; text-wrap: balance;

Le navigateur tente d'équilibrer la longueur des lignes. Le nombre de lignes ne devraient pas changer.

Les passeports ne servent jamais qu'à gêner les honnêtes gens et à favoriser la fuite des coquins. ⁽¹⁾
text-wrap: wrap stable; text-wrap: stable;

Le navigateur choisir l'algorithme qui ne va pas modifier les césures avant le curseur, lorsque le contenu est modifiable.

Les passeports ne servent jamais qu'à gêner les honnêtes gens et à favoriser la fuite des coquins. ⁽¹⁾
text-wrap: wrap pretty; ⚠ text-wrap: pretty; ⚠

Le navigateur doit choisir une méthode de césure pour une meilleure disposition et une vitesse élevée.

Les passeports ne servent jamais qu'à gêner les honnêtes gens et à favoriser la fuite des coquins. ⁽¹⁾
text-wrap: initial; (wrap) text-wrap: inherit; text-wrap: revert; text-wrap: revertLayer; text-wrap: unset;

Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de la propriété `text-wrap`.

Le propriété text-wrap peut être animée de façon "discrète", ce qui veut dire que le passage d'une valeur à l'autre se fait brutalement.

Les retours à la ligne de ce texte varient en fonction de text-wrap.

Manipulation de la propriété `text-wrap` par programme.

Avec Javascript, modifier la valeur de `text-wrap`.

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'] = 'wrap balance';
	// ou
	let el = document.getElementById('id');
	el.style.textWrap = 'wrap balance';

Avec Javascript, lire la valeur de `text-wrap`.

ce code renvoie la propriété de text-wrap affectée directement à l'élément lui-même via son attribut style. Il ne renvoie pas les valeurs affectées en passant par un sélecteur CSS.


	let el = document.getElementById('id');
	let value = el.style['text-wrap'];
	// ou
	let el = document.getElementById('id');
	let value = el.style.textWrap;

Avec Javascript, lire la valeur calculée de `text-wrap`.

La valeur calculée est le résultat de la cascade des héritages. Si aucune valeur n'a été affectée, ni à l'élément lui même, ni à l'un de ses parent, la valeur calculée est la valeur initiale (wrap pour text-wrap).


	let el = document.getElementById('id');
	let value = window.getComputedStyle(el).getPropertyValue('text-wrap');

Avec JQuery, modifier la valeur de `text-wrap`.

JQuery permet également de faire le travail.


 $('#id').css('text-wrap', 'wrap balance');
 // ou
 $('#id').css('textWrap', 'wrap balance');

Avec Javascript, lire la valeur de `text-wrap`.


	let value = $('#id').css('text-wrap');

Autres exemples de code.

D'autres exemples de code en Javascript et en JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Cliquez sur les boutons ci-dessous pour affecter une valeur à text-wrap, et relisez ensuite, soit sa valeur telle qu'elle a été affectée, soit la valeur calculée. S'il s'agit d'une valeur autorisée cela ne fera pas de différence dans le cas de text-wrap.

Simulateur avec la propriété `text-wrap`.

Reportez-vous aux deux propriétés individuelles pour plus d'exemple : text-wrap-mode et text-wrap-style.

Prise en charge de `text-wrap` par les navigateurs.

Colonne 1

Traitement correct par les navigateurs de la propriété résumée text-wrap, équivalente à text-wrap-mode et text-wrap-style.

Propriété
text-wrap

Estimation de la prise en charge globale.

89%

Navigateurs 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

Edge

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

Safari

Safari sur IOS

Samsung Internet

Chrome

Firefox

KaiOS Browser

Opéra mini

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

Caniuse

Historique de la propriété `text-wrap`.

Module CSS - Texte - Niveau 4

Introduction de la propriété résumée text-wrap acceptant les valeurs de text-wrap-mode et text-wrap-style.

22 Septembre 2015
Document de travail.

Voir aussi, à propos des manipulations de texte.

La propriété text-wrap fait partie du module CSS Text Module.
Les définitions suivantes sont également décrites dans ce même module.

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