diff --git a/files/en-us/web/css/text-wrap-mode/index.md b/files/en-us/web/css/text-wrap-mode/index.md index 468d2bb1715d08b..ad22ef69dc51f40 100644 --- a/files/en-us/web/css/text-wrap-mode/index.md +++ b/files/en-us/web/css/text-wrap-mode/index.md @@ -7,7 +7,10 @@ browser-compat: css.properties.text-wrap-mode {{CSSRef}} -The **`text-wrap-mode`** [CSS](/en-US/docs/Web/CSS) property controls whether the text inside an element is wrapped. The different values provide alternate ways of wrapping the content of a block element. It can also be set, and reset, using the {{CSSXRef("text-wrap")}} shorthand. +The **`text-wrap-mode`** [CSS](/en-US/docs/Web/CSS) property controls whether the text inside an element is wrapped. The different values provide alternate ways of wrapping the content of a block element. It can also be set, and reset, using the {{CSSXRef("text-wrap")}} shorthand or the {{CSSXRef("white-space")}} shorthand. + +> [!NOTE] +> The {{CSSxRef("white-space-collapse")}} and `text-wrap-mode` properties can be declared together using the {{CSSxRef("white-space")}} shorthand property. > [!NOTE] > The name of this property is a placeholder, pending the CSSWG finding a better name. @@ -18,15 +21,15 @@ The **`text-wrap-mode`** [CSS](/en-US/docs/Web/CSS) property controls whether th ```css /* Keyword values */ -text-wrap-style: wrap; -text-wrap-style: nowrap; +text-wrap-mode: wrap; +text-wrap-mode: nowrap; /* Global values */ -text-wrap-style: inherit; -text-wrap-style: initial; -text-wrap-style: revert; -text-wrap-style: revert-layer; -text-wrap-style: unset; +text-wrap-mode: inherit; +text-wrap-mode: initial; +text-wrap-mode: revert; +text-wrap-mode: revert-layer; +text-wrap-mode: unset; ``` ## Values @@ -48,9 +51,6 @@ This property specifies whether lines may wrap at unforced soft wrap opportuniti ## Examples -> [!NOTE] -> Check the browser support for this property. - ### Wrapping content The default setting is to wrap the content so the `text-wrap-mode` property is not necessary. In this example the content will flow over to the next line so that it fits in the box, the last line is longer that the containing box so overflows. diff --git a/files/en-us/web/css/text-wrap/index.md b/files/en-us/web/css/text-wrap/index.md index 41a695a1cbf36d0..db3d1cf9f48369b 100644 --- a/files/en-us/web/css/text-wrap/index.md +++ b/files/en-us/web/css/text-wrap/index.md @@ -12,9 +12,6 @@ The **`text-wrap`** CSS shorthand property controls how text inside an element i - Typographic improvements, for example more balanced line lengths across broken headings - A way to turn text wrapping off completely. -> [!NOTE] -> The {{CSSxRef("white-space-collapse")}} and `text-wrap` properties can be declared together using the {{CSSxRef("white-space")}} shorthand property. - {{EmbedInteractiveExample("pages/css/text-wrap.html")}} ## Constituent properties diff --git a/files/en-us/web/css/white-space-collapse/index.md b/files/en-us/web/css/white-space-collapse/index.md index e25ec23762cedce..6e4a97581553da9 100644 --- a/files/en-us/web/css/white-space-collapse/index.md +++ b/files/en-us/web/css/white-space-collapse/index.md @@ -10,7 +10,7 @@ browser-compat: css.properties.white-space-collapse The **`white-space-collapse`** [CSS](/en-US/docs/Web/CSS) property controls how {{Glossary("whitespace", "white space")}} inside an element is collapsed. > [!NOTE] -> The `white-space-collapse` and {{CSSxRef("text-wrap")}} properties can be declared together using the {{CSSxRef("white-space")}} shorthand property. +> The `white-space-collapse` and {{CSSxRef("text-wrap-mode")}} properties can be declared together using the {{CSSxRef("white-space")}} shorthand property. ## Syntax @@ -138,5 +138,5 @@ h2 { ## See also -- Shorthand for `white-space-collapse` and {{CSSxRef("text-wrap")}}: The {{CSSxRef("white-space")}} property. +- Shorthand for `white-space-collapse` and {{CSSxRef("text-wrap-mode")}}: The {{CSSxRef("white-space")}} property. - [CSS text module](/en-US/docs/Web/CSS/CSS_text) diff --git a/files/en-us/web/css/white-space/index.md b/files/en-us/web/css/white-space/index.md index 8a0c22e078e0684..f02fddcae6c264f 100644 --- a/files/en-us/web/css/white-space/index.md +++ b/files/en-us/web/css/white-space/index.md @@ -24,14 +24,13 @@ The property specifies two things: ```css /* Single keyword values */ white-space: normal; -white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; -white-space: break-spaces; -/* white-space-collapse and text-wrap shorthand values */ -white-space: collapse balance; +/* white-space-collapse and text-wrap-mode shorthand values */ +white-space: wrap; +white-space: collapse; white-space: preserve nowrap; /* Global values */ @@ -44,25 +43,16 @@ white-space: unset; ### Values -`white-space` property values can be specified as a single keyword chosen from the list of values below, or two values representing shorthand for the {{CSSxRef("white-space-collapse")}} and {{cssxref("text-wrap")}} properties. +The `white-space` property values can be specified as a single keyword chosen from the list of values below, or two values representing shorthand for the {{CSSxRef("white-space-collapse")}} and {{cssxref("text-wrap-mode")}} properties. - `normal` - : Sequences of white space are [collapsed](#collapsing_of_white_space). Newline characters in the source are handled the same as other white spaces. Lines are broken as necessary to fill line boxes. -- `nowrap` - - : [Collapses](#collapsing_of_white_space) white space as the `normal` value does, but suppresses line breaks (text wrapping) within the source. - `pre` - : Sequences of white space are preserved. Lines are only broken at newline characters in the source and at {{HTMLElement("br")}} elements. - `pre-wrap` - : Sequences of white space are preserved. Lines are broken at newline characters, at {{HTMLElement("br")}}, and as necessary to fill line boxes. - `pre-line` - : Sequences of white space are [collapsed](#collapsing_of_white_space). Lines are broken at newline characters, at {{HTMLElement("br")}}, and as necessary to fill line boxes. -- `break-spaces` - - - : The behavior is identical to that of `pre-wrap`, except that: - - - Any sequence of preserved white space always takes up space, including at the end of the line. - - A line-breaking opportunity exists after every preserved white space character, including between white space characters. - - Such preserved spaces take up space and do not hang, thus affecting the box's intrinsic sizes ({{cssxref("min-content")}} size and {{cssxref("max-content")}} size). The following table summarizes the behavior of the various `white-space` keyword values: @@ -86,14 +76,6 @@ The following table summarizes the behavior of the various `white-space` keyword Remove Hang - - nowrap - Collapse - Collapse - No wrap - Remove - Hang - pre Preserve @@ -118,14 +100,6 @@ The following table summarizes the behavior of the various `white-space` keyword Remove Hang - - break-spaces - Preserve - Preserve - Wrap - Wrap - Wrap -