overflow-inline
overflow-inline
は CSS のプロパティで、コンテンツがボックスのインライン方向の先頭および末尾方向の端をあふれた時にどのように表示するかを設定します。これは表示なし、スクロールバー付き、コンテンツをはみ出させる、のいずれかになります。
メモ: overflow-inline
プロパティは、文書の書字方向に応じて、 overflow-y
または overflow-x
に対応します。
構文
/* キーワード値 */
overflow-inline: visible;
overflow-inline: hidden;
overflow-inline: clip;
overflow-inline: scroll;
overflow-inline: auto;
/* グローバル値 */
overflow-inline: inherit;
overflow-inline: initial;
overflow-inline: revert;
overflow-inline: revert-layer;
overflow-inline: unset;
overflow-inline
プロパティは、単一の <overflow>
キーワード値で指定します。
値
visible
-
コンテンツは切り取られず、パディングボックスのインライン方向の先頭と末尾の端よりも外側に表示される可能性があります。
-
インライン方向にパディングボックスに合わせる必要がある場合は、コンテンツを切り取ります。スクロールバーは表示されません。
clip
-
あふれたコンテンツは、
overflow-clip-margin
プロパティを使用して定義された要素のオーバーフロークリップ枠で切り取られます。 scroll
-
あふれたコンテンツは、インライン方向にパディングボックスに合わせる必要がある場合に切り取られます。ブラウザーはコンテンツが実際に切り取られるかどうかにかかわらず、スクロールバーを表示します。 (これで、コンテンツが変化したときにスクロールバーが表示されたり非表示になったりすることを防ぎます。) プリンターはあふれたコンテンツを印刷するかもしれません。
auto
-
ユーザーエージェントに依存します。コンテンツがパディングボックス内に収まる場合は
visible
と同じように表示されますが、新しいブロック整形コンテキストを生成します。コンテンツがあふれる場合、デスクトップブラウザーはスクロールバーを表示します。
公式定義
初期値 | auto |
---|---|
適用対象 | ブロックコンテナー, フレックスコンテナー, グリッドコンテナー |
継承 | なし |
計算値 | 指定通り、ただし overflow-x と overflow-y のどちらかが visible でも clip でもない場合は、 visible /clip はそれぞれ auto /hidden と計算される |
アニメーションの種類 | 離散値 |
形式文法
例
インライン方向のはみ出し動作の設定
HTML
<ul>
<li>
<code>overflow-inline: hidden</code> (ボックスの外側のテキストを隠す)
<div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: scroll</code> (常にスクロールバーを表示)
<div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: visible</code> (必要に応じてテキストをボックスの外に表示)
<div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: auto</code> (多くのブラウザーでは
<code>scroll</code> と同じ)
<div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
<li>
<code>overflow-inline: clip</code> (オーバーフロークリップ枠を越えてボックスの外にあるテキストを隠す)
<code>clip</code>
<div id="div5">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
</li>
</ul>
CSS
div {
border: 1px solid black;
width: 250px;
margin-bottom: 12px;
}
#div1 {
overflow-inline: hidden;
}
#div2 {
overflow-inline: scroll;
}
#div3 {
overflow-inline: visible;
}
#div4 {
overflow-inline: auto;
}
#div5 {
overflow-inline: clip;
overflow-clip-margin: 2em;
}
結果
仕様書
Specification |
---|
CSS Overflow Module Level 3 # overflow-control |
ブラウザーの互換性
BCD tables only load in the browser