PLAY CSS
jaen

Box

max-inline-size

max-inline-size sets an upper limit on the size of an element in the direction its text runs. In horizontal text it works like max-width, and in vertical text like max-height.

Syntax

<'max-width'>

Preview

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize

Code

.box {
  writing-mode: vertical-rl;
  inline-size: 18em;
  max-inline-size: 8em;
}

Controls

max-inline-size8em
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

About

Writing the value

  • A length such as 8em: never larger than that.
  • none: the initial value. No upper limit.
  • min-content, max-content and fit-content: use a size taken from the content as the limit. min-content is the length with every possible line break taken.

As on the inline-size page, the preview box is vertical (writing-mode: vertical-rl), so max-inline-size is an upper limit on its height. A helper declaration makes it tall with inline-size: 18em, but it stops at the limit, and text that does not fit wraps into the next column to the left. Dragging the handle at the bottom right does not make it taller than the limit.

In vertical text, a % is a share of the parent's height, and it has no effect unless that height is set, so this page does not offer it.

When to use it

To limit the line length of text for readability (such as max-inline-size: 40em). In vertical text, it still limits the line length.

Watch out

  • It sets the same thing as max-width in horizontal text and max-height in vertical text, so when both are written, the later one wins.
  • When min-inline-size is larger, the lower limit wins over the upper one.
  • Works in all major browsers.

References

MDN Web Docsmax-inline-sizeSpecificationCSS Logical Properties and Values Level 1Can I usemax-inline-size

Comments

PLAY CSS