--- title: overflow-block slug: Web/CSS/overflow-block tags: - CSS - CSS Box Model - CSS Property - Reference - 'recipe:css-property' translation_of: Web/CSS/overflow-block ---
{{CSSRef}}
overflow-block
は CSS プロパティで、内容がブロックの先頭およびブロックの末尾の端をあふれた時にどのように表示するかを設定します。これは表示なし、スクロールバー付き、内容をはみ出させる、のいずれかになります。
overflow-block
プロパティは、文書の書字方向に応じて、 {{Cssxref("overflow-y")}} または {{Cssxref("overflow-x")}} に対応します。
/* キーワード値 */ overflow-block: visible; overflow-block: hidden; overflow-block: scroll; overflow-block: auto; /* グローバル値 */ overflow-block: inherit; overflow-block: initial; overflow-block: unset;
overflow-block
プロパティは、以下の値の一覧のうち一つのキーワードで指定します。
visible
hidden
scroll
auto
visible
と同じように表示されますが、新しいブロック整形コンテキストを生成します。内容があふれる場合、デスクトップブラウザーはスクロールバーを表示します。{{CSSInfo}}
<ul> <li><code>overflow-block:hidden</code> — ボックスの外側のテキストを隠す <div id="div1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div> </li> <li><code>overflow-block:scroll</code> — 常にスクロールバーを表示 <div id="div2"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div> </li> <li><code>overflow-block:visible</code> — 必要に応じてテキストをボックスの外に表示 <div id="div3"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div> </li> <li><code>overflow-block:auto</code> — 多くのブラウザーでは <code>scroll</code> と同じ <div id="div4"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div> </li> </ul>
#div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; height: 100px; } #div1 { overflow-block: hidden; margin-bottom: 120px;} #div2 { overflow-block: scroll; margin-bottom: 120px;} #div3 { overflow-block: visible; margin-bottom: 120px;} #div4 { overflow-block: auto; margin-bottom: 120px;}
仕様書 | 状態 | 備考 |
---|---|---|
{{ SpecName('CSS3 Overflow', '#propdef-overflow-block', 'overflow-block') }} | {{ Spec2('CSS3 Overflow') }} |
{{Compat("css.properties.overflow-block")}}