CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSオーバーフロープロパティの操作

CSSオーバーフロープロパティは、ユーザーがコンテンツのサイズを変更せずに、小さなコンテナに大きなコンテンツを表示したい場合に便利です。このプロパティを使用すると、ユーザーはコンテンツをクリップしたり、クリップしたコンテンツを表示するためのスクロールバーを提供したり、コンテンツをコンテナの外にレンダリングしたりできるため、名前がオーバーフローします。

構文

CSSオーバーフロープロパティの構文は次のとおりです-

Selector {
   overflow: /*value*/
}

CSSオーバーフロープロパティの値は次のとおりです-

Sr.No 値と説明
1 表示
これはデフォルト値であり、コンテンツはクリップされず、要素のボックスの外側にレンダリングされるため、プロパティ名がオーバーフローします
2 非表示
要素のボックスからオーバーフローしたコンテンツをクリップします。クリップされたコンテンツは表示されません。
3 スクロール
要素のボックスからオーバーフローしたコンテンツをクリップします。スクロールバーもコンテンツと一緒にレンダリングされるため、クリップされたコンテンツが表示されます。
4 自動
スクロールバーを自動的にレンダリングして、オーバーフローしたコンテンツを確認します

CSSオーバーフロープロパティの例を見てみましょう-

例

<!DOCTYPE html>
<html>
<head>
<title>CSS Overflow</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input[type="button"] {
   border-radius: 10px;
}
#containerDiv {
   margin: 0 auto;
   height: 100px;
   width: 100px;
   overflow: auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Overflow</legend>
<div id="containerDiv">
<img id="image" src="https://www.tutorialspoint.com/hadoop/images/hadoop-mini-logo.jpg">
</div>
<input type="button" onclick="fitHeight()" value="Remove Scrollbars">
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var imgSelect = document.getElementById("image");
var containerDiv = document.getElementById("containerDiv");
function fitHeight() {
   containerDiv.style.height = imgSelect.height+'px';
   containerDiv.style.width = imgSelect.width+'px';
   containerDiv.style.overflow = 'hidden';
}
</script>
</body>
</html>

出力

ボタンをクリックする前に-

CSSオーバーフロープロパティの操作

[スクロールバーを削除]をクリックした後 ボタン-

CSSオーバーフロープロパティの操作

CSSオーバーフロープロパティの別の例を見てみましょう-

例

<!DOCTYPE html>
<html>
<head>
<title>CSS Overflow</title>
<style>
form {
   width:70%;
   margin: 0 auto;
   text-align: center;
}
* {
   padding: 2px;
   margin:5px;
}
input[type="button"] {
   border-radius: 10px;
}
#containerDiv {
   margin: 0 auto;
   height: 110px;
   overflow: scroll;
}
</style></head>
<body>
<form>
<fieldset>
<legend>CSS Overflow</legend>
<div id="containerDiv">
This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.</div>
<input type="button" onclick="add()" value="Remove Scrollbars">
</fieldset>
</form>
<script>
function add() {
   document.querySelector('#containerDiv').style.overflow = "hidden";
}
</script>
</body>
</html>

出力

[スクロールバーを削除]をクリックする前に ボタン-

CSSオーバーフロープロパティの操作

[スクロールバーを削除]ボタンをクリックした後 −

CSSオーバーフロープロパティの操作


  1. CSSを使用したテキストインデント

    CSS text-indentプロパティは、要素の最初の行のインデントを設定するのに役立ちます。 構文 CSStext-indentプロパティの構文は次のとおりです- Selector {    text-indent: /*value*/ } 例 次の例は、CSSのtext-indentプロパティを示しています。 <!DOCTYPE html> <html> <head> <style> div {    display: flex;    float: left;  

  2. HTMLDOMスタイルのオーバーフロープロパティ

    DOMスタイルのオーバーフロープロパティは、HTMLドキュメント内の要素のオーバーフローCSSプロパティを返し、変更します。 構文 以下は構文です- オーバーフローを返す object.style.overflow オーバーフローの変更 object.style.overflow = “value” 値 ここで、値は-になります。 値 説明 スクロール コンテンツをクリップし、必要に応じてスクロールバーを追加します。 継承 このプロパティ値は親要素から継承されます。 初期 このプロパティ値をデフォルト値に設定します。 自動 コンテ