max-inline-size
max-inline-size は、文字が並ぶ向きの要素の大きさの上限を決めます。横書きでは max-width と、縦書きでは max-height と同じ働きになります。
構文
<'max-width'>プレビュー
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
writing-mode: vertical-rl;
inline-size: 18em;
max-inline-size: 8em;
}コントロール
max-inline-size8em
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
解説
値の書き方
8emなどの長さ：その長さより大きくしません。none：初期値です。上限を決めません。min-content・max-content・fit-content：中身から決まる大きさを上限にします。min-contentなら、折り返せるところをすべて折り返した長さです。
プレビューの箱は inline-size のページと同じく縦書き（writing-mode: vertical-rl）にしてあるので、max-inline-size は箱の高さの上限になります。補助の宣言で inline-size: 18em と高く決めていますが、上限で止まり、収まらない文字は左の列へ折り返します。右下のつまみで高さを広げても、上限より高くはなりません。
縦書きでは % が親の高さに対する割合になり、親の高さが決まっていないと効かないので、このページでは選べるようにしていません。
よく使う場面
文章の 1 行の長さに上限を付けて読みやすくするときに使います（max-inline-size: 40em など）。縦書きにしても、1 行の長さの上限のまま働きます。
気をつけること
- 横書きでは
max-widthと、縦書きではmax-heightと同じものを決めるので、両方書くとあとに書いた方が効きます。 min-inline-sizeのほうが大きいときは、上限より下限が勝ちます。- 主要なブラウザすべてで使えます。