So verbergen Sie Inhalte, die über den DIV-Rahmen hinausgehen

Beim normalen Layout überschreitet der Inhalt manchmal die Breite und Höhe unseres DIV-Rahmens, was dazu führt, dass die Webseite falsch ausgerichtet und unordentlich wird, was besonders unansehnlich ist und eine sehr schlechte Benutzererfahrung hat Überlaufende DIV-Grenze? Was ist mit dem Inhalt? Heute bringe ich Ihnen dieses Tutorial.

So verbergen Sie mithilfe von CSS-Stilen automatisch Inhalte, die über die Breite und Höhe des DIV-Rahmens hinausragen.

Beim normalen Layout überschreiten einige Textinhalte die Höhe der Überlaufgrenze, andere jedoch nicht Das Bild führt zum Platzen des DIV und zu einer Fehlausrichtung der Webseite.

Auf diese Weise müssen wir lösen, wie wir mithilfe von CSS Inhalte automatisch ausblenden, 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.

1. Lösen Sie den CSS-Stil

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

Der entsprechende Stilüberlauf:versteckt

Div{overflow:hidden}

Wenn nach dieser Einstellung das DIV-Objekt 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 des DIV überschreiten.

Verwandte Lektüre: CSS implementiert Überlauf und zeigt Ellipsen über den Textinhalt hinaus

2. Fälle, in denen überschüssiger Inhalt ausgeblendet wird

1 das Objekt

Wenn wir das Objekt in einem Layout schön ausrichten, müssen wir manchmal die Höhe und Breite des Objekts festlegen und es dann korrigieren. Zu diesem Zeitpunkt müssen wir sicherstellen, dass es egal ist, wie viel Inhalt und Text vorhanden ist, wird das Layout die festgelegte Breite und Höhe nicht überschreiten. Zu diesem Zeitpunkt benötigen wir overflow:hidden, um zu helfen.

CSS-Code:

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

<p class="pcss5">欢迎，
</p>

Wenn Sie overflow:hidden auf diese Weise festlegen, wird der Inhalt ausgeblendet, der nicht in das Objekt passt, unabhängig davon, wie viel Inhalt außerhalb der Breite und Höhe festgelegt ist .

2. Fall des Ausblendens des Teils des Bildes, der über die Breite des Objekts hinausgeht

Stellen Sie hier ein Objektfeld mit einer bestimmten CSS-Breite und CSS-Höhe ein, fügen Sie ein großes Bild ein und Verwenden Sie dann overflow:hidden, um den überschüssigen Teil auszublenden.

CSS-Code

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

Html-Code

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

Legen Sie die Breite und Höhe fest, obwohl das Bild groß ist

Um es zusammenzufassen: Wenn Sie möchten, dass der Inhalt die vom Objekt festgelegten Breiten- und Höhengrenzen nicht überschreitet, müssen Sie nur overflow:hidden verwenden, um die überschüssigen Teile auszublenden.

Verwandte Lektüre:

So legen Sie Bildlaufleisten für DIV fest

So verwenden Sie CSS, um DIV zu zentrieren

Einführung in das Festlegen der Eigenschaften und Stile der DIV-Bildlaufleiste

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