CSSレイアウト-オーバーフロー
CSSoverflowプロパティは、領域に収まらないほど大きいコンテンツに何が起こるかを制御します。
このテキストは非常に長く、コンテナの高さはわずか100ピクセルです。したがって、読者がコンテンツをスクロールするのに役立つスクロールバーが追加されています。痛み自体は愛ですだからこそ、私たちの通常の慣行が結果を利用するために耐えるのは、ほんの少しでも来るのですオリンピックの局の痛み、またはオリンピックの局の痛み、彼は結果に迷惑をかけたい、または彼は真実のeu免疫システムの痛みに苦しんでいます、エロスそして消費者、そしてzzrilの定期的な憎しみ。私たちがティーンエイジャーから解放された自由な時間のために選択の余地はありませんタイプには固有の明確さはありませんそれは彼らの明快さを作成する人々の読者の使用です。
CSSオーバーフロー
このoverflowプロパティは、要素のコンテンツが大きすぎて指定された領域に収まらない場合に、コンテンツをクリップするか、スクロールバーを追加するかを指定します。
overflowプロパティの値は次のとおりです。
visible- ディフォルト。オーバーフローはクリップされません。コンテンツは要素のボックスの外側にレンダリングされますhidden-オーバーフローはクリップされ、残りのコンテンツは非表示になりますscroll-オーバーフローがクリップされ、残りのコンテンツを表示するためにスクロールバーが追加されますauto-に似てscrollいますが、必要な場合にのみスクロールバーを追加します
注：このoverflowプロパティは、指定された高さのブロック要素に対してのみ機能します。
注： OS X Lion（Macの場合）では、スクロールバーはデフォルトで非表示になっており、使用時にのみ表示されます（「overflow：scroll」が設定されている場合でも）。
オーバーフロー：表示
デフォルトでは、オーバーフローはvisible、クリップされず、要素のボックスの外側にレンダリングされることを意味します。
レイアウトをより適切に制御したい場合は、overflowプロパティを使用できます。オーバーフロープロパティは、コンテンツが要素のボックスをオーバーフローした場合に何が起こるかを指定します。
例
div {
width: 200px;
height:
50px;
background-color: #eee;
overflow: visible;
}
オーバーフロー：非表示
このhidden値を使用すると、オーバーフローがクリップされ、残りのコンテンツが非表示になります。
レイアウトをより適切に制御したい場合は、overflowプロパティを使用できます。オーバーフロープロパティは、コンテンツが要素のボックスをオーバーフローした場合に何が起こるかを指定します。
例
div {
overflow: hidden;
}
オーバーフロー：スクロール
値をに設定するscrollと、オーバーフローがクリップされ、ボックス内をスクロールするためのスクロールバーが追加されます。これにより、水平方向と垂直方向の両方にスクロールバーが追加されることに注意してください（必要がない場合でも）。
レイアウトをより適切に制御したい場合は、overflowプロパティを使用できます。オーバーフロープロパティは、コンテンツが要素のボックスをオーバーフローした場合に何が起こるかを指定します。
例
div {
overflow: scroll;
}
オーバーフロー：自動
auto値はに似ていscrollますが、必要な場合にのみスクロールバーを追加します。
レイアウトをより適切に制御したい場合は、overflowプロパティを使用できます。オーバーフロープロパティは、コンテンツが要素のボックスをオーバーフローした場合に何が起こるかを指定します。
例
div {
overflow: auto;
}
オーバーフロー-xおよびオーバーフロー-y
overflow-xandoverflow-yプロパティは、コンテンツのオーバーフローを水平方向に変更するか、垂直方向（または両方）に変更するかを指定します。
overflow-xコンテンツの左端/右端をどうするかを指定します。
overflow-yコンテンツの上端/下端をどうするかを指定します。
レイアウトをより適切に制御したい場合は、overflowプロパティを使用できます。オーバーフロープロパティは、コンテンツが要素のボックスをオーバーフローした場合に何が起こるかを指定します。
例
div {
overflow-x: hidden; /* Hide horizontal scrollbar
*/
overflow-y: scroll; /* Add vertical scrollbar */
}
すべてのCSSオーバーフロープロパティ
| Property | Description |
|---|---|
| overflow | Specifies what happens if content overflows an element's box |
| overflow-wrap | Specifies whether or not the browser can break lines with long words, if they overflow its container |
| overflow-x | Specifies what to do with the left/right edges of the content if it overflows the element's content area |
| overflow-y | Specifies what to do with the top/bottom edges of the content if it overflows the element's content area |