CSS Display Module Level 3

https://www.w3.org/TR/css-display-3/
Admin
CSS Display Module Level 3 describes how the CSS formatting box tree is generated from the document...
Tokens:14,638
Snippets:114
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### Formatted output of run-in dictionary example

Source: https://www.w3.org/TR/css-display-3

The formatted output of the run-in dictionary example, showing how the terms appear inline with their definitions.

```text
**dictionary:** a book that lists the words of a language
in alphabetical order and explains their meaning.

**glossary:** an alphabetical list of terms or words found
in or relating to a specific subject, text, or dialect,
with explanations; a brief dictionary.
```

--------------------------------

### Reorder flex items with order: -1

Source: https://www.w3.org/TR/css-display-3

CSS uses the order property with a negative value to shift the image before other content in layout order, while the HTML provides the logical source order with the title first. The example shows a catalog item card where the image is pulled to the top for visual presentation.

```css
article.sale-item {
  display: flex;
  flex-flow: column;
}
article.sale-item > img {
  order: -1; /* Shift image before other content (in layout order) */
  align-self: center;
}

```

```html
<article class="sale-item">
  <h3>Computer Starter Kit</h3>
  <p>This is the best computer money can buy, if you don’t have much money.
  <ul>
    <li>Computer
    <li>Monitor
    <li>Keyboard
    <li>Mouse
  </ul>
  <img src="images/computer.jpg"
    alt="You get: a white desktop computer with matching peripherals."
    width="250" height="188">
</article>

```

--------------------------------

### Spoiler element using visibility: hidden and click to toggle

Source: https://www.w3.org/TR/css-display-3

A deliberately simplified spoiler element that toggles visibility of a span when clicked. It uses visibility: hidden to keep layout stable while hiding text, and toggles a class to make it visible. The example is missing accessibility and UX features and should not be copied for a real site.

```html
<p>The symbolism earlier in the movie becomes obvious at the end,
  when it's revealed that <spoiler-text><span>Luke is his own father</span></spoiler-text>,
  making the wizard's cryptic riddles meaningful.
<style>
spoiler-text { border-bottom: 1px solid; }
spoiler-text > span { visibility: hidden; }
spoiler-text.shown > span { visibility: visible; }
</style>
<script>
[...document.querySelectorAll("spoiler-text")].forEach(el=>{
  el.addEventListener("click", e=>el.classList.toggle("shown"));
});
</script>
```

--------------------------------

### Run-in layout for dictionary definitions

Source: https://www.w3.org/TR/css-display-3

A dictionary definition list where the term (dt) is displayed as run-in, merging into the following definition (dd) as inline content. The ::after pseudo-element adds a colon and space after each term.

```html
<dl class='dict'>
  <dt>dictionary
  <dd>a book that lists the words of a language in alphabetical
      order and gives their meaning, or that gives the equivalent
      words in a different language.
  <dt>glossary
  <dd>an alphabetical list of terms or words found in or relating
      to a specific subject, text, or dialect, with explanations; a
      brief dictionary.
</dl>
<style>
.dict > dt {
  display: run-in;
}
.dict > dt::after {
  content: ": "
}
</style>
```

--------------------------------

### Table-cell with table-row parent and anonymous table-row-group wrapper

Source: https://www.w3.org/TR/css-display-3

Shows a table-cell inside a table-row inside a table, and the anonymous table-row-group wrapper box generated because the table-row is not the correct parent for the table-cell.

```html
<div style="display:table;">
  <div style="display:table-row">
    <div style="display:table-cell">...</div>
  </div>
</div>

```

```text
table box
└anonymous table-row-group box
 └table-row box
  └table-cell box

```

--------------------------------

### Misparented table-cell with generated wrapper boxes

Source: https://www.w3.org/TR/css-display-3

Shows a table-cell element misparented inside a block container, and the anonymous wrapper boxes generated around it to satisfy table layout requirements.

```html
<div style="display:block;">
  <div style="display:table-cell">...</div>
</div>

```

```text
block box
└anonymous table box
 └anonymous table-row-group box
  └anonymous table-row box
   └table-cell box

```
Tokens:
Raw