So verbergen Sie Inhalte, die über ein DIV hinausgehen

Normalerweise gibt es beim Layouten der Webseite immer ein Problem mit zu viel Textinhalt, der die Höhe überschreitet, die unser Limit überschreitet. Dann wird es einige Bilder geben, die das DIV beschädigen und verursachen Die Webseite ist falsch ausgerichtet und unübersichtlich. Wie können wir das Problem lösen?

Wir müssen herausfinden, wie wir mithilfe von CSS Inhalte automatisch ausblenden können, die die festgelegte CSS-Breite und CSS-Höhe überschreiten, ohne das DIV-Layout zu beschädigen.

Besonders in IE6 wird es platzen und in der Höhe zunehmen, wenn der Inhalt die Höhe und Breite des Objekts überschreitet. Zu diesem Zeitpunkt können wir die folgenden Lösungen verwenden.

CSS-Stile lösen

Zu diesem Zeitpunkt können wir den CSS-Stil overflow verwenden, um Folgendes zu lösen:

entsprechender Stil overflow:hidden

Div{ overflow:hidden}

Wenn das DIV-Objekt nach dieser Einstellung auf eine bestimmte Breite und Höhe eingestellt ist, wird durch Hinzufügen von overflow:hidden zu diesem Zeitpunkt der Inhalt ausgeblendet, einschließlich der Bilder, die die Breite und Höhe überschreiten die DIV.

Verwandte Lektüre: CSS-Implementierung von Überlauf, der den Textinhalt überschreitet und Auslassungspunkte anzeigt

Über den Inhalt hinaus ausblenden

1. Textinhalt über die Objektbreite und -höhe hinaus ausblenden

Wenn wir das Objekt in einem Layout schön ausrichten müssen, müssen wir manchmal die Höhe und Breite des Objekts festlegen und es dann korrigieren. Zu diesem Zeitpunkt müssen wir uns darüber im Klaren sein, dass es egal ist, wie viel Inhalt und Text vorhanden sind. Das Layout sollte die eingestellte Breite und Höhe nicht überschreiten. Zu diesem Zeitpunkt benötigen wir die Hilfe von overflow:hidden.

CSS-Code:

<style> 
.div{ width:300px; height:50px; line-height:25px; overflow:hidden} 
/* 设置对象高度宽度，同时设置overflow:hidden */ 
</style>

Html-Code:

<div class="div">欢迎，

Hier können Sie CSS lernen und die benötigten Ressourcen herunterladen,

Im Gleichzeitig können Sie Ihre eigenenFAQAntworten

finden.

Lösung zum Unterbrechen des Inhalts.

Auf diese Weise wird das Objekt durch overflow:hidden ausgeblendet Legen Sie die Breite und den Inhalt fest, der zu hoch ist, um über den Rahmen hinauszupassen.

Legen Sie hier eine Objektbox mit einer bestimmten CSS-Breite und CSS-Höhe fest, platzieren Sie ein großes Bild und verwenden Sie dann overflow:hidden, um den überschüssigen Teil auszublenden.

CSS-Code

<style> 
.div{ width:300px; height:50px; line-height:25px; overflow:hidden} 
/* 设置对象高度宽度，同时设置overflow:hidden */ 
</style>

Html-Code

<div class="div"> 
<img src="http://www.php.cn" /> 
</div>

Wenn Sie also möchten, dass der Inhalt die vom Objekt festgelegte Breiten- und Höhenbeschränkung nicht überschreitet, verwenden Sie Überlauf :hidden, um den Überschuss zu verbergen.

Es gibt so viele Tipps zum Verstecken von Überläufen. Weitere spannende Inhalte finden Sie auf der chinesischen PHP-Website Andere verwandte Artikel!

Verwandte Lektüre:

So verwenden Sie DIV in HTML

So verwenden Sie den HTML5

-Tag

So schreiben Sie eine HTML-Dokumenttypdeklaration

Das obige ist der detaillierte Inhalt vonSo verbergen Sie Inhalte, die über ein DIV hinausgehen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!