溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css中overflow: hidden的使用方法

發(fā)布時(shí)間：2021-03-22 09:49:33 來(lái)源：億速云 閱讀：339 作者：小新 欄目：web開發(fā)

小編給大家分享一下css中overflow: hidden的使用方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

溢出隱藏

就是隱藏超出規(guī)定高度的文本或者圖像信息。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {background-color: yellow;width: 350px;height: 100px;overflow: hidden;}
	</style>
</head>
<body>
<p>元素中的內(nèi)容超出了給定的寬度和高度屬性，overflow屬性<br>可以確定顯示的方式，以及是否顯示滾動(dòng)條。</p>
<div>這個(gè)屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理。<br>如果值為 hidden，則隱藏超出范圍的部分。<br>如果值為 scroll，則顯示滾動(dòng)條。<br>如果值為 visible，則超出部分會(huì)呈現(xiàn)在元素框之外。<br>如果值為auto，則為自動(dòng)；文本超出元素框，則顯示滾動(dòng)條，沒(méi)有超出，則不顯示滾動(dòng)條。<br>如果值為inherit，則繼承父元素的overflow屬性的值。</div>
</body>
</html>

下圖分別是值為hidden和值為auto時(shí)截取

css中overflow: hidden的使用方法css中overflow: hidden的使用方法

還有一個(gè)是單行顯示文本信息，超出部分用省略號(hào)顯示（強(qiáng)調(diào)一下：必須是一行文本顯示才有效哦?。?/p>

div {
    background-color: yellow;
    width: 350px;
    margin: 100px auto;
    white-space: nowrap;/*強(qiáng)調(diào)文本在一行內(nèi)顯示*/
    overflow: hidden;/*溢出內(nèi)容為隱藏*/
    text-overflow: ellipsis;/*溢出文本顯示省略號(hào)*/
    }

css中overflow: hidden的使用方法

清除浮動(dòng)
布局的時(shí)候經(jīng)常會(huì)用這種左右布局：一個(gè)父盒子，父盒子中包含 left 和 right 兩個(gè) child 盒子。但是 child 的內(nèi)容個(gè)數(shù)大小都不確定，也就不能給父盒子固定的高度，父盒子高度就需要根據(jù) child 盒子高度來(lái)改變。下面我們來(lái)了解一下！

下面是父盒子給了200px的高度，兩個(gè) child 盒子左右浮動(dòng)，顯示是沒(méi)有問(wèn)題的。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {margin: 0;padding: 0}
		.header {background-color: #333;color: #fff;text-align: center;height: 80px;line-height: 80px;}
		.father_box {width: 500px;height: 200px;margin: 0 auto;background-color: yellow;}
		.child_left {width: 100px;height: 100px;background-color: blue;float: left;}
		.child_right {width: 200px;height: 150px;background-color: blue;float: right;}
		.footer {background-color: #333;color: #fff;text-align: center;height: 80px;line-height: 80px;}
	</style>
</head>
<body>
	<div class="header">header在這兒</div>
	<div class="father_box">
		<div class="child_left">child_left</div>
		<div class="child_right">child_right</div>
	</div>
	<div class="footer">footer在這兒</div>
</body>
</html>

css中overflow: hidden的使用方法

當(dāng)右面的盒子內(nèi)容增加，父盒子也就應(yīng)該隨著增高，這時(shí)，我們通常都會(huì)刪除父盒子的高度，讓父盒子自適應(yīng)高度，但是結(jié)果卻是這樣。兩個(gè) child 盒子覆蓋了 footer ，這是因?yàn)椋簝蓚€(gè) child 因?yàn)楦?dòng)的關(guān)系，脫離了標(biāo)準(zhǔn)流，但是父盒子沒(méi)有給高度，父盒子就認(rèn)為它沒(méi)有任何內(nèi)容，所以高度就不會(huì)被內(nèi)容撐開，相當(dāng)于父級(jí)的高度是0px;那么跟他平級(jí)的盒子footer,就會(huì)按照標(biāo)準(zhǔn)流的排布，緊挨著平級(jí)的黃色父盒子排著下來(lái)，就造成了頁(yè)面的排布紊亂（也叫頁(yè)面的塌陷）。

css中overflow: hidden的使用方法

這時(shí)我們給父盒子加一個(gè) overflow:hiffen; 這時(shí)頁(yè)面就變成了這樣，父盒子高度隨著 child 盒子增高也增高了。

css中overflow: hidden的使用方法

如果在IE比較低版本的瀏覽器中使用overflow:hidden;也不能達(dá)到這樣的效果，那么就加上 zoom:1; 即：overflow:hidden;zoom:1;

這個(gè)原理其實(shí)是一個(gè)叫做BFC(Block formatting context)的概念在起作用，也就是“塊格式化上下文”。BFC定義了一塊獨(dú)立的渲染區(qū)域，規(guī)定了其內(nèi)部塊級(jí)元素的渲染規(guī)則，其渲染效果不受外界環(huán)境的干擾。

css中overflow: hidden的使用方法

對(duì)BFC感興趣的小伙伴們可以再去深入了解一下啦！

解決插入圖片后圖片底部的留白問(wèn)題
插入圖片后，由于box盒子沒(méi)有給定高度，所以會(huì)被圖片的高度撐開，并會(huì)留下幾個(gè)像素的空隙（紅色部分）。

<!DOCTYPE html>
<html lang="en">
<head>
	<style type="text/css">
		* {margin: 0;padding: 0;list-style: none;}
		.box {width: 200px;background-color: red;margin: 0 auto;}
	</style>
</head>
<body>
	<div class="box">
		<img src="img02.jpg" width="200" height="200" alt="">
	</div>
</body>
</html>

解決辦法有下面兩種：

1、給父盒子加一個(gè)高度height，和圖片一樣高，并添加overflow:hidden;（這兩個(gè)一起添加，兼容性會(huì)更好一些?。?/p>

css中overflow: hidden的使用方法

2、不需要給盒子添加高度，讓其自適應(yīng)圖片高，而給img添加display:block;

css中overflow: hidden的使用方法

以上是“css中overflow: hidden的使用方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手