Welche Rolle spielt overflow:hidden in CSS? Einführung in die Rolle von overflow:hidden-CSS-Tutorial-php.cn

Welche Rolle spielt overflow:hidden in CSS? Einführung in die Rolle von overflow:hidden

不言

Freigeben： 2018-10-29 11:16:44

Original

56610 Leute haben es durchsucht

Im CSS-Stil bedeutet overflow:hidden, dass der Überlauf ausgeblendet wird. Wie der Name schon sagt, besteht die einfachste Funktion von overflow:hidden darin, den übergelaufenen Teil auszublenden, wenn der Inhalt im Element überläuft Schauen Sie sich die spezifische Rolle von overflow:hidden in CSS an.

Wir haben oben bereits gesagt, dass die einfachste Funktion von overflow:hidden darin besteht, den Überlauf zu verbergen:

<html>
<head>
<style type="text/css">
div 
{
background-color:pink;
width:150px;
height:150px;
overflow: hidden;
}
</style>
</head>
<body>
<div>
愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者的话。
唯有民族魂是值得宝贵的，唯有它发扬起来，中国才有真进步。
愈艰难，就愈要做。改革，是向来没有一帆风顺的。
我们目下的当务之急是：一要生存，二要温饱，三要发展。
必须敢于正视，这才可望敢想、敢说、敢做、敢当。
</div>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Welche Rolle spielt overflow:hidden in CSS? Einführung in die Rolle von overflow:hidden

Aus dem obigen Effekt geht deutlich hervor, dass die Teile außerhalb des Textes nicht sichtbar sind. Dies ist tatsächlich der Überlauf-Versteckeffekt von overflow:hidden. Sind diese verborgenen Teile also verschwunden? Natürlich nicht, der versteckte Teil des Textes ist einfach unsichtbar, aber er existiert tatsächlich noch. Wenn Sie möchten, dass der versteckte Teil des Textes angezeigt wird, wenn Sie die Maus bewegen, müssen Sie den Pseudoklassenteil in CSS Knowledge verwenden Schauen wir uns konkrete Codebeispiele an:

<html>
<head>
<style type="text/css">
div 
{
background-color:pink;
width:150px;
height:150px;
overflow: hidden;
}
div:hover{
    overflow: visible;
}
</style>
</head>
<body>
<div>
愿中国青年都摆脱冷气，只是向上走，不必听自暴自弃者的话。
唯有民族魂是值得宝贵的，唯有它发扬起来，中国才有真进步。
愈艰难，就愈要做。改革，是向来没有一帆风顺的。
我们目下的当务之急是：一要生存，二要温饱，三要发展。
必须敢于正视，这才可望敢想、敢说、敢做、敢当。
</div>
</body>
</html>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Welche Rolle spielt overflow:hidden in CSS? Einführung in die Rolle von overflow:hidden

Der Effekt des obigen Bildes ist der, wenn die Maus gedrückt wird auf den Text gelegt, der verborgene Teil des Textes wird angezeigt. Wir können sehen, dass es im Code ein zusätzliches div:hover{overflow: sichtbar;} gibt und :hover die Pseudoklasse in CSS ist.

Dieser Artikel endet hier. Weitere spannende Inhalte finden Sie in den entsprechenden Kolumnen-Tutorials auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonWelche Rolle spielt overflow:hidden in CSS? Einführung in die Rolle von overflow:hidden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!