So legen Sie CSS3 über die versteckte Funktion hinaus fest

CSS3 ist ein integraler Bestandteil der modernen Webentwicklung. Es stellt Entwicklern eine Reihe von Tools und Techniken zur Verfügung, um die Sichtbarkeit, Interaktivität und Zugänglichkeit von Websites zu verbessern. Eine davon ist die Funktion „Beyond Hidden“, die in diesem Artikel ausführlich behandelt wird.

Was ist jenseits des Versteckens?

Über das Ausblenden hinaus ist eine sehr nützliche Funktion in CSS3. Wenn der Textinhalt die Abmessungen seines Containers überschreitet, wird der überschüssige Teil normalerweise automatisch abgeschnitten. Wenn wir diesen überschüssigen Inhalt jedoch ausblenden möchten, können wir die Funktion zum Ausblenden überschüssiger Inhalte verwenden.

In CSS können Sie verschiedene Arten des Ausblendens von Überläufen erreichen, indem Sie unterschiedliche Attributwerte festlegen:

1. overflow:hidden: Dieses Attribut kann zum Ausblenden von Überläufen verwendet werden: versteckter Containerteil. Es schneidet den Textinhalt ab und verbirgt den Überschuss.
2. text-overflow:ellipsis: Dieses Attribut kann den Textinhalt außerhalb des Containers als Ellipsen anzeigen.
3. white-space:nowrap: Dieses Attribut kann erzwingen, dass der Textinhalt in derselben Zeile ohne Umbruch angezeigt wird. Wenn der Inhalt die Containergröße überschreitet, wird er ausgeblendet.

Wie verwende ich Beyond Hide?

Die Verwendung der Beyond Hide-Funktion ist sehr einfach. Hier sind ein paar Beispiele zum besseren Verständnis:

Beyond Hide Beispiel 1:

Zuerst definieren wir einen einfachen Div-Container und fügen ihm dann Textinhalte hinzu: # 🎜🎜 #

<div class="container">
    <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
</div>

Als nächstes verwenden wir overflow:hidden, um den Teil des Texts auszublenden, der über den Container hinausgeht:

.container {
    width: 200px;
    height: 50px;
    background-color: #ccc;
    overflow: hidden;
}

Im obigen Code beträgt die Breite des div-Containers 200px und der Die Höhe beträgt 50 Pixel. Der Textinhalt ist groß und überschreitet die Breite und Höhe des Containers. Durch die Verwendung des Attributs overflow:hidden wird der überschüssige Inhalt jedoch einfach ausgeblendet.

Overhide Beispiel 2:

Das nächste Beispiel verwendet text-overflow:ellipsis anstelle von text-overflow:clip:

<div class="container">
    <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo.</p>
</div>

.container {
    width: 200px;
    height: 50px;
    background-color: #ccc;
    white-space: nowrap;
    overflow:hidden;
}

p {
    text-overflow: ellipsis;
}

In diesem In Im Beispiel verwenden wir „white-space:nowrap“, um zu verhindern, dass Text umbrochen wird. Wir verwenden auch das Attribut overflow:hidden, um den überschüssigen Teil auszublenden, und verwenden text-overflow:ellipsis, um den überschüssigen Teil als Ellipsen anzuzeigen.

Zusammenfassung

Die Funktion zum Ausblenden ist eine praktische Funktion in CSS3. Es hilft uns, Textinhalte außerhalb des Containers zu verbergen und die Seite klarer und lesbarer zu machen. Die obigen Beispiele sind nur eine kurze Einführung in die verborgenen Möglichkeiten von CSS3. Wenn Sie komplexere Stile und Effekte benötigen, lernen Sie CSS3 bitte gründlich kennen und beherrschen Sie weitere Tipps und Techniken.

Das obige ist der detaillierte Inhalt vonSo legen Sie CSS3 über die versteckte Funktion hinaus fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!