溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“怎么用html實現內容超出自動隱藏”，內容詳細，步驟清晰，細節處理妥當，希望這篇“怎么用html實現內容超出自動隱藏”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
html實現內容超出自動隱藏的方法是，給文本內容添加overflow屬性，并且設置屬性值為hidden即可，例如【div{overflow: hidden;}】。
本文操作環境：windows10系統、html 5、thinkpad t480電腦。
在實際工作中，我們可能會需要顯示一段長文本，但是我們的文本框大小可能沒有那么大，那么我們該如何做呢？其實很簡單，就是讓超出文本框的內容隱藏就好了。但是要實現這種效果，我們又該怎么去做呢？
我們只需要借助于overflow屬性就可以實現這個效果。
overflow屬性指定如果內容溢出一個元素的框，會發生什么。
常用屬性值：
visible 默認值。內容不會被修剪，會呈現在元素框之外。
hidden 內容會被修剪，并且其余內容是不可見的。
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。
代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>億速云(php.cn)</title>
<style>
div.ex1 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: scroll;
}
div.ex2 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: hidden;
}
div.ex3 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
div.ex4 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: visible;
}
</style>
</head>
<body>
<h2>overflow 屬性</h2>
<p>如果元素中的內容超出了給定的寬度和高度屬性，overflow 屬性可以確定是否顯示滾動條等行為。</p>
<h3>overflow: scroll:</h3>
<div class="ex1">億速云提供大量免費、原創、高清的php視頻教程,并定期舉行公益php培訓!可邊學習邊在線修改示例代碼,查看執行效果!php從入門到精通,一站式php自學平臺!</div>
<h3>overflow: hidden:</h3>
<div class="ex2">億速云提供大量免費、原創、高清的php視頻教程,并定期舉行公益php培訓!可邊學習邊在線修改示例代碼,查看執行效果!php從入門到精通,一站式php自學平臺!</div>
<h3>overflow: auto:</h3>
<div class="ex3">億速云提供大量免費、原創、高清的php視頻教程,并定期舉行公益php培訓!可邊學習邊在線修改示例代碼,查看執行效果!php從入門到精通,一站式php自學平臺!</div><h3>overflow: visible (默認):</h3> <div class="ex4">億速云提供大量免費、原創、高清的php視頻教程,并定期舉行公益php培訓!可邊學習邊在線修改示例代碼,查看執行效果!php從入門到精通,一站式php自學平臺!</div> </body> </html>
讀到這里，這篇“怎么用html實現內容超出自動隱藏”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
