Update syntax for white-space (#37494)

* `white-space` no longer a shorthand for `text-wrap` * fix typo * remove outdated values * Update files/en-us/web/css/white-space/index.md * Update files/en-us/web/css/white-space/index.md --------- Co-authored-by: Estelle Weyl <[email protected]>
mdn · Jan 6, 2025 · 4809e82 · 4809e82
1 parent 85890fb
commit 4809e82
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 46 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
       <td>Remove</td>
       <td>Hang</td>
     </tr>
-    <tr>
-      <th><code>nowrap</code></th>
-      <td>Collapse</td>
-      <td>Collapse</td>
-      <td>No wrap</td>
-      <td>Remove</td>
-      <td>Hang</td>
-    </tr>
     <tr>
       <th><code>pre</code></th>
       <td>Preserve</td>
@@ -118,14 +100,6 @@ The following table summarizes the behavior of the various `white-space` keyword
       <td>Remove</td>
       <td>Hang</td>
     </tr>
-    <tr>
-      <th><code>break-spaces</code></th>
-      <td>Preserve</td>
-      <td>Preserve</td>
-      <td>Wrap</td>
-      <td>Wrap</td>
-      <td>Wrap</td>
-    </tr>
   </tbody>
 </table>