CSS溢出使用方法教程詳細介紹

當我們在一個固心猿意馬的區域來顯示一個文字或者一個內嵌頁面，紛歧心猿意馬做的內容和頁面剛好匹配，這種環境下就會呈現溢出，溢出的時辰我們可以選擇顯示滾動條和選擇不顯示滾動條這幾種環境來處置。

東西/原料

CSS根本常識
HTML根本常識

方式/步調

1
起首我們來設計一個布景為紅色的，巨細為100px*100px的矩形框，框中輸入文字，看看我們不設計滾動方面的屬性默認顯示的結果是什么樣子的？具體代碼如下：
<html>
<head>
<title>溢出相關</title>
<style>
.div1{
background-color:red;
height:100px;
width:100px;
}
</style>
</head>
<body>
<div class="div1">我愛HTML，我愛CSS
我愛HTML，我愛CSS我愛HTML，我愛CSS
我愛HTML，我愛CSS
</div>
</body>
</html>
可以看到超出區域的文字顯示鄙人面了，沒有滾動條。
2
若是要將文字就只顯示在固心猿意馬區域內呢？我沒這里可以用overflow來設置為auto，具體代碼如下：
<html>
<head>
<title>溢出相關</title>
<style>
.div1{
background-color:red;
height:100px;
width:100px;
overflow:auto;
}
</style>
</head>
<body>
<div class="div1">我愛HTML，我愛CSS
我愛HTML，我愛CSS我愛HTML，我愛CSS
我愛HTML，我愛CSS
</div>
</body>
</html>
可以看到如下圖所示的結果，區域顯示不下的時辰主動添加了滾動條。
3
若是我們需要將顯示不了的文字裁剪失落，固心猿意馬區域能顯示幾多就顯示幾多，不要滾動條該怎么做呢？具體代碼如下：
<html>
<head>
<title>溢出相關</title>
<style>
.div1{
background-color:red;
height:100px;
width:100px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="div1">我愛HTML，我愛CSS
我愛HTML，我愛CSS我愛HTML，我愛CSS
我愛HTML，我愛CSS
</div>
</body>
</html>
可以看到，將顯示不了的內容裁剪失落了，這個區域內只顯示了能顯示的內容了。
4
還有一種環境就是不管內容超沒超出區域城市顯示滾動條，這里可以看看具體的代碼和結果：
<html>
<head>
<title>溢出相關</title>
<style>
.div1{
background-color:red;
height:100px;
width:100px;
overflow:scroll;
}
</style>
</head>
<body>
<div class="div1">我愛HTML，我愛CSS
我愛HTML，我愛CSS我愛HTML，我愛CSS
我愛HTML，我愛CSS
</div>
</body>
</html>
可以看到，固然文字很好，這個區域可以或許完當作顯示可是呢仍是添加了一個滾動條，具體結果圖如下。
5
只顯示豎著的滾動條，具體代碼如下：
<html>
<head>
<title>溢出相關</title>
<style>
.div1{
background-color:red;
height:100px;
width:100px;
overflow-y:scroll;
}
</style>
</head>
<body>
<div class="div1">我愛HTML，我愛CSS
</div>
</body>
</html>
如下圖，是不是只顯示了豎著的滾動條了。
6
還可以只顯示橫著的滾動條，具體代碼如下：
<html>
<head>
<title>溢出相關</title>
<style>
.div1{
background-color:red;
height:100px;
width:100px;
overflow-x:scroll;
}
</style>
</head>
<body>
<div class="div1">我愛HTML，我愛CSS
</div>
</body>
</html>
可以看到，下圖的結果，只顯示了橫著的滾動條，其實橫著豎著的滾動條還有良多其他的設置。