So verbergen Sie die Dropdown-Bildlaufleiste in CSS-CSS-Tutorial-php.cn

So verbergen Sie die Dropdown-Bildlaufleiste in CSS

王林

Freigeben： 2023-01-06 11:13:12

Original

4502 Leute haben es durchsucht

Die Möglichkeit, die Dropdown-Bildlaufleiste in CSS auszublenden, besteht darin, das Überlaufattribut hinzuzufügen, z. B. [overflow:hidden]. Zu diesem Zeitpunkt wird die Dropdown-Bildlaufleiste vollständig ausgeblendet. Es ist zu beachten, dass das Überlaufattribut nur für Blockelemente mit einer bestimmten Höhe funktioniert.

So verbergen Sie die Dropdown-Bildlaufleiste in CSS

Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS 3, Thinkpad T480-Computer.

In CSS können wir das Overflow-Attribut verwenden, um das Hinzufügen von Bildlaufleisten im entsprechenden Elementbereich zu steuern, wenn der Inhalt die Elementbox überläuft.

Wenn wir die Bildlaufleiste ausblenden und die Bildlaufleiste anzeigen müssen, wenn der Inhalt überläuft, müssen wir nur den Stil „overflow:auto“ festlegen. Wenn wir die Bildlaufleiste vollständig ausblenden möchten, müssen wir nur „overflow:hidden“ festlegen. Dies führt jedoch dazu, dass der Inhalt des Elements nicht scrollbar ist.

Hinweis: Das Überlaufattribut funktioniert nur bei Blockelementen mit einer angegebenen Höhe.

Zum Beispiel:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
<style>
div {
    background-color: #eee;
    width: 200px;
    height: 50px;
    border: 1px dotted black;
    overflow: visible;
}
</style>
</head>
<body>

<div id="overflowTest">
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
</div>

</body>
</html>

Nach dem Login kopieren

Zugehöriges Video-Tutorial: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo verbergen Sie die Dropdown-Bildlaufleiste in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!