Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update syntax for white-space #37494

Merged
merged 5 commits into from
Jan 6, 2025
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions files/en-us/web/css/text-wrap-mode/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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
Expand All @@ -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.
Expand Down
3 changes: 0 additions & 3 deletions files/en-us/web/css/text-wrap/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions files/en-us/web/css/white-space-collapse/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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)
31 changes: 2 additions & 29 deletions files/en-us/web/css/white-space/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,11 @@ 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 and text-wrap-mode shorthand values */
white-space: collapse balance;
white-space: preserve nowrap;
skyclouds2001 marked this conversation as resolved.
Show resolved Hide resolved

Expand All @@ -44,25 +42,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.
`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.
estelle marked this conversation as resolved.
Show resolved Hide resolved

- `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:

Expand All @@ -86,14 +75,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>
Expand All @@ -118,14 +99,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>

Expand Down
Loading