Text-wrap-mode - Property CSS
Summary of characteristics of the text-wrap-mode property
wrap | nowrapwrapDiscrète: during an animation, the text-wrap-mode property passes from one value to another without transition.Syntax diagram of text-wrap-mode.
text-wrap-mode property.The links in the diagram provide more details about the values.
Description of the text-wrap-mode property.
text-wrap-mode defines whether line breaks are allowed or prohibited between boxes of type inline.... For example, when several
inline-box follow one another.
This property does not concern line breaks in a flex-box, which are managed by the property flex-wrap .
The property text-wrap-mode is a detailed property of the two shorthand property white-space and text-wrap.
See also :
text-wrap: Defines the handling of text wraps.text-wrap-style: Defines how line breaks will be made.wrap-before: Autorise ou non les sauts de lignes avant la boite.wrap-after: Allows or does not allow line breaks after the box.wrap-inside: Allows or does not allow line breaks in the box.white-space: Defines how multiple spaces and carriage returns are restored.
Values for text-wrap-mode.
- text-wrap-mode: wrap;
Line breaks are allowed.
The container below contains five blocks of the type
inline-block.12345 - text-wrap-mode: nowrap;
Line breaks are not allowed. The content may overflow its container..
12345 - text-wrap-mode: initial; (
wrap) text-wrap-mode: inherit; text-wrap-mode: revert; text-wrap-mode: revertLayer; text-wrap-mode: unset;Common values are presented on these pages:
initial,inherit,revert,revert-layer,unset.
Animation of the text-wrap-mode property.
The property text-wrap-mode animates "in jerks", meaning it suddenly switches from its wrap value to its nowrap value.
Manipulating the text-wrap-mode property programmatically.
With Javascript, change the value of text-wrap-mode.
In Javascript, here is how to modify the value of text-wrap-mode. Two syntaxes are possible: with the typical CSS notation, in kebab-case,
and with the notation in camel-case.
let el = document.getElementById('id');
el.style['text-wrap-mode'] = 'wrap';
// or
let el = document.getElementById('id');
el.style.textWrapMode = 'wrap';
With Javascript, read the value of text-wrap-mode.
The property must have been assigned directly to the element itself via its style attribute, and not through a CSS selector.
let el = document.getElementById('id');
let value = el.style['text-wrap-mode'];
// or
let el = document.getElementById('id');
let value = el.style.textWrapMode;
With Javascript, read the computed value of text-wrap-mode.
The calculated value is the one resulting from the cascade of inheritances, or if not available, the calculated value is the initial value
wrap for text-wrap-mode).
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('text-wrap-mode');
With JQuery, change the value of text-wrap-mode.
JQuery also allows you to do the job.
$('#id').css('text-wrap-mode', 'wrap');
// or
$('#id').css('textWrapMode', 'wrap');
With Javascript, read the value of text-wrap-mode.
let value = $('#id').css('text-wrap-mode');
Test it yourself.
By clicking on the buttons below, you set the value to an item, then you either read back the assigned value or the calculated value.
In the case of text-wrap-mode, this will be the same since this property only accepts predefined values.
Simulator.
The container below contains one element of type inline-block, one of type inline-flex, one of type inline-table,
and two elements of type inline-block.
| a1 | a2 |
| b1 | b2 |
Browsers compatibility with text-wrap-mode..
text-wrap-mode property which manages line breaks inside an inline box.text-wrap-modeproperty
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
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
Historic of the text-wrap-mode property.
-
CSS Text Module Level 4
This level 4 of this specification module describes the properties that affect typographic rules: text alignment and justification, word or character spacing, hyphenation rules, etc.
Compared to level 3, several new properties have been added, particularly concerning line breaks, hyphenation, spacing before and/or after the text, etc.Regardingtext-wrap-mode. First introduction of thetext-wrap-modeproperty.
September 22, 2015Working Draft.
See also, regarding text manipulations.
The property text-wrap-mode is part of the module CSS Text Module.
The following definitions are also described in this same module.
Properties:
text-align).text-spacing-trim and text-autospace. Groups character spacing information for CJK languages.