Heim > Artikel > Web-Frontend > Tipps zum HTML-Layout: So verwenden Sie das Overflow-Attribut zur Kontrolle des Textüberlaufs
Tipps zum HTML-Layout: So verwenden Sie das Overflow-Attribut zur Kontrolle des Textüberlaufs
- WBOYOriginal
- 2023-10-19 11:30:501354Durchsuche
HTML-Layout-Kenntnisse: So verwenden Sie das Overflow-Attribut zur Textüberlaufkontrolle
Bei der Webentwicklung stoßen wir manchmal auf das Problem, dass Textinhalte zu lang sind und überlaufen. Um diesen Überlauf zu kontrollieren und das Layout der Webseite schöner und regelmäßiger zu gestalten, können Sie das Overflow-Attribut von CSS verwenden. In diesem Artikel wird die Verwendung des Überlaufattributs vorgestellt und spezifische Codebeispiele bereitgestellt.
1. Die Rolle des Überlaufattributs
Das Überlaufattribut wird verwendet, um zu steuern, wie der Elementinhalt überläuft. Ein Überlauf tritt auf, wenn der Inhalt eines Elements seine festgelegte Breite oder Höhe überschreitet. Das Überlaufattribut kann den Ausdruck dieses Überlaufs steuern und hat normalerweise die folgenden Werte:
- sichtbar: Der Inhalt wird nicht gekürzt und läuft außerhalb der Elementbox über. Dies ist der Standardwert.
- versteckt: Der Inhalt ist beschnitten und nicht sichtbar.
- Scrollen: Der Inhalt wird gekürzt, es werden jedoch Bildlaufleisten bereitgestellt, um den Rest des Inhalts anzuzeigen.
- auto: Stellt automatisch Bildlaufleisten bereit, wenn der Inhalt überläuft.
Beim Überlauf von Textinhalten werden häufig ausgeblendet und Auslassungspunkte verwendet.
2. Verwenden Sie „hidden“, um den Textüberlauf zu kontrollieren.
Der Wert „hidden“ bedeutet, dass der Elementinhalt gekürzt und ausgeblendet wird, wenn er überläuft. Indem Sie das Überlaufattribut auf „Ausgeblendet“ setzen, können Sie den Ausblendungseffekt des Textüberlaufs erzielen. Hier ist ein Beispielcode:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 100px;
border: 1px solid black;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac nisi sed est hendrerit hendrerit nec at ipsum. Sed finibus diam urna, a convallis ex auctor non. Praesent ornare mi sed iaculis hendrerit. Sed vitae ipsum et nisi vestibulum tincidunt vel eu erat. Sed suscipit dui eu felis commodo aliquet.
</div>
</body>
</html>Im obigen Code wird ein Containerelement div verwendet und eine durchgezogene schwarze Linie mit einer Breite von 200 Pixel, einer Höhe von 100 Pixel und einem Rand von 1 Pixel festgelegt. Wenn Sie das Überlaufattribut auf „Ausgeblendet“ setzen, wird der überschüssige Teil ausgeblendet und nicht angezeigt, wenn der Textinhalt überläuft. Dadurch wird der Effekt einer Textinhaltsüberlaufkontrolle erreicht.
3. Verwenden Sie Auslassungspunkte, um Auslassungspunkte anzuzeigen, wenn Text überläuft.
In einigen Fällen möchten wir Auslassungspunkte anzeigen, wenn Text überläuft, um Benutzer daran zu erinnern, dass mehr Inhalte angezeigt werden müssen. Zu diesem Zeitpunkt können Sie die Textüberlaufeigenschaft von CSS und das Schlüsselwort ellipsis verwenden, um dies zu erreichen. Hier ist ein Beispielcode:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 100px;
border: 1px solid black;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac nisi sed est hendrerit hendrerit nec at ipsum. Sed finibus diam urna, a convallis ex auctor non. Praesent ornare mi sed iaculis hendrerit. Sed vitae ipsum et nisi vestibulum tincidunt vel eu erat. Sed suscipit dui eu felis commodo aliquet.
</div>
</body>
</html>Im obigen Code wird durch Festlegen des Textüberlaufattributs auf Auslassungspunkte der überschüssige Teil als Auslassungspunkte (...) angezeigt, wenn der Textinhalt überläuft. Gleichzeitig wird durch Setzen des White-Space-Attributs auf nowrap der Text in einer Zeile angezeigt, sodass die Auslassungspunkte angezeigt werden können. Dadurch wird erreicht, dass Auslassungspunkte angezeigt werden, wenn der Text überläuft.
Zusammenfassend kann die Verwendung des Überlaufattributs zur Steuerung des Überlaufs von Textinhalten das Überlaufproblem im Webseitenlayout effektiv lösen. Je nach tatsächlichem Bedarf können unterschiedliche Überlaufkontrolleffekte erzielt werden, indem der entsprechende Überlaufwert ausgewählt und mit anderen verwandten Attributen kombiniert wird. Ich hoffe, dass Sie die spezifischen Codebeispiele in diesem Artikel hilfreich finden.
Das obige ist der detaillierte Inhalt vonTipps zum HTML-Layout: So verwenden Sie das Overflow-Attribut zur Kontrolle des Textüberlaufs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!