CSS außerhalb der Anzeige

WBOY

Freigeben： 2023-05-27 09:29:36

Original

8746 Leute haben es durchsucht

CSS-Überlauf bezieht sich auf den Umgang mit überlaufendem Inhalt, wenn der Inhalt eines Elements seine angegebene Breite oder Höhe überschreitet. In diesem Fall können wir einige von CSS bereitgestellte Eigenschaften und Werte verwenden, um die Anzeige und Ausblendung des darüber hinausgehenden Inhalts zu steuern und ihn auf der Seite schöner und lesbarer zu gestalten.

CSS-Überlaufeigenschaft

Wenn der Inhalt eines Elements seine angegebene Breite oder Höhe überschreitet, können wir die Überlaufeigenschaft in CSS verwenden, um zu steuern, wie der übergelaufene Inhalt angezeigt wird. Das Überlaufattribut hat die folgenden Werte:

sichtbar: Der überschüssige Inhalt wird außerhalb des Elements angezeigt und kann andere Elemente verdecken.
hidden: Der überschüssige Inhalt wird abgeschnitten und nicht auf der Seite angezeigt.
scroll: Wenn der Inhalt überläuft, wird eine Bildlaufleiste angezeigt, damit der Benutzer durch den Inhalt scrollen kann.
auto: Wenn der Inhalt überläuft, wird eine Bildlaufleiste angezeigt, andernfalls wird der Inhalt normal angezeigt.

Wenn wir beispielsweise Inhalte in einem Div mit fester Höhe anzeigen möchten und der Inhalt die Höhe des Div überschreitet, können wir das Überlaufattribut auf Scrollen oder Ausblenden setzen.

Einige sehr lange Inhalte

< ;/div>

Wenn in diesem Beispiel der Inhalt des p-Elements die Höhe von 200 Pixel überschreitet, wird eine vertikale Bildlaufleiste angezeigt, sodass der Benutzer scrollen kann, um den Inhalt anzuzeigen.

CSS-Textüberlaufeigenschaft

Zusätzlich zur Verwendung der Überlaufeigenschaft, um zu steuern, wie der Inhalt außerhalb des Inhalts angezeigt wird, können wir auch die Textüberlaufeigenschaft in CSS verwenden um den Textinhalt über die Art und Weise der Zeitanzeige hinaus zu steuern. Das Text-Overflow-Attribut wird nur wirksam, wenn das White-Space-Attribut auf Nowrap gesetzt ist.

text-overflow hat die folgenden drei Werte:

clip: Wenn der Text größer ist, wird er abgeschnitten und nicht auf der Seite angezeigt.
Ellipse: Ellipsen werden angezeigt, wenn der Text überschritten wird.
string: Der angegebene String wird über dem Text angezeigt.

Wenn wir beispielsweise einen langen Titel in einer Zeile anzeigen möchten und der Titeltext die Breite des Elements überschreitet, können wir das Textüberlaufattribut und das White-Overflow-Attribut verwenden. Raumattribut.

Dies ist ein langer, langer, langer Titel

# 🎜🎜#

Wenn in diesem Beispiel der Titeltext die Breite des Elements überschreitet, werden Auslassungspunkte angezeigt, um den Benutzer darüber zu informieren, dass der Text abgeschnitten wurde.

CSS-Zeilenumbruch-Attribut

Zusätzlich zur Verwendung der Überlauf- und Textüberlauf-Attribute zur Steuerung des Überlaufs und Abschneidens von Elementinhalten können wir auch den Zeilenumbruch verwenden Attribut in CSS, um den Umbruch von Textwörtern zu steuern.

Wenn ein Wort die Breite des Elements überschreitet, wird es standardmäßig abgeschnitten und in der nächsten Zeile angezeigt. Wenn wir jedoch sicherstellen möchten, dass Wörter nicht an Wortgrenzen abgeschnitten und umbrochen werden, können wir das Attribut „Wortumbruch“ verwenden.

Das Zeilenumbruch-Attribut hat die folgenden zwei Werte:

break-word: Das Wort wird, sofern verfügbar, umgebrochen und abgeschnitten, wenn das Wort zu lang ist.

Wenn wir beispielsweise langen Text in einer begrenzten Breite anzeigen möchten, aber auch sicherstellen möchten, dass alle Wörter an den Rändern umbrochen werden und alle überschüssigen Inhalte abgeschnitten werden, können Sie Folgendes verwenden Das folgende CSS:

Dies ist ein langer, langer, langer Absatz Text. Es enthält viele Wörter, die jedoch an den Rändern umbrochen und nicht abgeschnitten werden.

Fazit

Beim Entwerfen von Webseiten müssen wir den Inhalt normalerweise so weit wie möglich an unterschiedliche Bildschirmgrößen und Auflösungen anpassen. Um sicherzustellen, dass der Überlaufinhalt korrekt auf der Seite angezeigt werden kann, können wir einige in CSS bereitgestellte Eigenschaften und Werte verwenden, wie z. B. Überlauf, Textüberlauf und Zeilenumbruch, die beim Seitenlayout hilfreich sein können und lassen Sie die Seite viel klarer und übersichtlicher aussehen.

Das obige ist der detaillierte Inhalt vonCSS außerhalb der Anzeige. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!