Text-wrap-mode - Propriété CSS

text-wrap-mode

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

Description rapide

Définit si les retours à la ligne sont autorisés.

Statut

Standard

Utilisable sur

[html]

Valeurs prédéfinies

wrap | 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-mode 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 de la syntaxe de `text-wrap-mode`.

Schéma syntaxique de la propriété text-wrap-mode.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

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

text-wrap-mode définit si les retours à la ligne sont autorisés ou interdits entre les boites de type inline.... Par exemple lorsque plusieurs inline-box se succède.
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.

La propriété text-wrap-mode est une propriété détaillée, reprise par white-space et text-wrap.

Voir aussi :

text-wrap : Définit la gestion des retours à la ligne du texte.
text-wrap-style : Définit comment les saut de ligne vont se faire.
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-mode`.

text-wrap-mode: wrap;

Les retours à la ligne sont autorisés.

Le container ci-dessous contient cinq blocs du type inline-block.

1
2
3
4
5
text-wrap-mode: nowrap;

Les retours à la ligne ne sont pas autorisés.

1
2
3
4
5
text-wrap-mode: initial; (wrap) text-wrap-mode: inherit; text-wrap-mode: revert; text-wrap-mode: revertLayer; text-wrap-mode: unset;

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

Exemple d'animation de `text-wrap-mode`.

La propriété text-wrap-mode s'anime "par saccade", c'est à dire qu'elle passe brutalement de sa valeur wrap à sa valeur nowrap.

Accéder à la propriété `text-wrap-mode` par programme.

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

En Javascript, voici comment modifier la valeur de text-wrap-mode. Deux syntaxe sont possibles : avec la notation typique de CSS, en kebab-case, et avec la notation en camel-case.


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

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

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-mode'];
	// ou
	let el = document.getElementById('id');
	let value = el.style.textWrapMode;

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

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 (wrap pour text-wrap-mode).


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

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

JQuery permet également de faire le travail.


 $('#id').css('text-wrap-mode', 'wrap');
 // ou
 $('#id').css('textWrapMode', 'wrap');

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


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

Testez vous-même.

En cliquant sur les boutons ci-dessous, vous affectez la valeur à un élément, puis vous relisez soit la valeur affectée, soit la valeur calculée. Dans le cas de text-wrap-mode cela sera la même chose puisque cette propriété n'accepte que des valeurs prédéfinies.

Exemple interactif avec la propriété `text-wrap-mode`.

Le container ci-dessous contient un élément de type inline-block, un de type inline-flex, un de type inline-table, et deux éléments de type inline-block.

text-wrap-mode :

wrap

nowrap

a1	a2
b1	b2

Compatibilité des navigateurs avec `text-wrap-mode`..

Colonne 1

Traitement correct par les navigateurs de la propriété text-wrap-mode qui gère les sauts de lignes à l'intérieur d'une boite inline.

Propriété
text-wrap-mode

Estimation de la prise en charge globale.

86%

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

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

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

Caniuse

Histoire de la propriété `text-wrap-mode`.

Module CSS - Texte - Niveau 4

Première introduction de la propriété text-wrap-mode.

22 Septembre 2015
Document de travail.

Voir aussi, à propos des manipulations de texte.

La propriété text-wrap-mode 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