溫馨提示×

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

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

css如何設(shè)置溢出隱藏

發(fā)布時(shí)間：2021-04-02 11:22:11 來源：億速云 閱讀：281 作者：小新 欄目：web開發(fā)

這篇文章主要介紹css如何設(shè)置溢出隱藏，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

css設(shè)置溢出隱藏的方法：首先創(chuàng)建一個(gè)HTML示例文件；然后在body中定義一些p標(biāo)簽內(nèi)容；最后通過“overflow:hidden”屬性來設(shè)置溢出隱藏即可。

在CSS中，可以利用overflow屬性，使用overflow:hidden來設(shè)置溢出隱藏。

overflow屬性

overflow屬性規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)發(fā)生的事情。

這個(gè)屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理。如果值為 scroll，不論是否需要，用戶代理都會(huì)提供一種滾動(dòng)機(jī)制。因此，有可能即使元素框中可以放下所有內(nèi)容也會(huì)出現(xiàn)滾動(dòng)條。

說明：所有主流瀏覽器都支持 overflow 屬性。

可能的值

visible：默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。

hidden：內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。

scroll：內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。

auto：如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div {
background-color: pink;
width: 150px;
height: 150px;
overflow: hidden
}
</style>
</head>
<body>
<p>如果元素中的內(nèi)容超出了給定的寬度和高度屬性，overflow 屬性可以確定是否顯示滾動(dòng)條等行為。</p>
<div>
這個(gè)屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會(huì)如何處理。如果值為 scroll，不論是否需要，
用戶代理都會(huì)提供一種滾動(dòng)機(jī)制。因此，有可能即使元素框中可以放下所有內(nèi)容也會(huì)出現(xiàn)滾動(dòng)條。
默認(rèn)值是 visible。
</div>
</body>
</html>

效果圖：

css如何設(shè)置溢出隱藏

以上是“css如何設(shè)置溢出隱藏”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

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

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

css
AI
助
手