CSS überschreitet Teilanzeige

Überlaufbehandlung in CSS bezieht sich darauf, wie mit der Situation umgegangen wird, wenn der Inhalt innerhalb eines Elements die Größe seines Containers überschreitet. Normalerweise passt der Browser die Größe und Position des Inhalts im Container automatisch an die Größe des Containers an. Manchmal möchten wir jedoch den Anzeigeeffekt steuern können, wenn der Inhalt den Container überschreitet. In diesem Artikel werden Techniken und Methoden zum Umgang mit übermäßiger Anzeige in CSS vorgestellt.

1. Überlaufattribut

In CSS können Sie das Überlaufattribut verwenden, um die Situation zu behandeln, in der der Inhalt im Container überläuft. Dieses Attribut hat die folgenden vier Werte:

1. visible: Standardwert. Ermöglicht, dass Inhalte den Container überlaufen und außerhalb des Containers angezeigt werden.
2. hidden: Gibt an, dass der Inhalt außerhalb des Containers ausgeblendet wird. Mit anderen Worten: Dieser Wert schneidet den Überlaufinhalt ab und macht ihn unsichtbar.
3. scroll: Gibt an, dass der Inhalt innerhalb des Containers gescrollt wird. Dieser Wert erstellt Bildlaufleisten innerhalb des Containers, sodass der Inhalt gescrollt werden kann.
4. auto: Wenn der Überlaufinhalt in den Container passt, erfolgt keine Verarbeitung. Wenn der Überlaufinhalt nicht passt, werden Bildlaufleisten angezeigt.

2. Das text-overflow-Attribut

Das text-overflow-Attribut kann steuern, wie mit überlaufendem Text umgegangen wird. Es gilt nur für Inline-Elemente auf Blockebene Denn nur diese Elemente können den automatischen Zeilenumbruch von Text vervollständigen.

text-overflow hat die folgenden drei Werte:

1. clip: Standardwert. Wenn der Text den Container überschreitet, wird er direkt zugeschnitten.
2. Auslassungspunkte: Wenn der Text den Container überschreitet, wird er durch Auslassungspunkte dargestellt.
3. string: Benutzerdefinierte Ellipsen. Mit dieser Eigenschaft können Sie die Ellipsen für jede Zeichenfolge anpassen.

3. Leerraumattribut

Das Leerraumattribut kann steuern, ob der Text automatisch umbrochen wird, ob die Überlauftextanzeige „Leerzeichen“ ignoriert und wie man damit umgeht „Raum“.

Dieses Attribut hat die folgenden drei Werte:

1. normal: Standardwert. Gibt an, dass der Text automatisch umgebrochen wird und zusätzliche „Leerzeichen“ ignoriert werden.
2. nowrap: Zeigt an, dass der Text nicht automatisch umgebrochen wird. Wenn der Text die Breite des Containers überschreitet, läuft er direkt über den Container.
3. pre-wrap: Gibt an, dass „Leerzeichen“ beibehalten werden, Zeilen aber automatisch umgebrochen werden können.

4. Mehrspaltiges Layout columns-layout

Mithilfe des mehrspaltigen CSS-Layouts kann der Inhalt im Container zur Anzeige in mehrere Spalten unterteilt werden Vermeiden Sie einzelne Inhalte, wenn eine Spalte den Container überschreitet.

Sie können das Attribut „column-count“ verwenden, um die Anzahl der Spalten in mehreren Spalten zu definieren. Verwenden Sie „column-gap“, um den Abstand zwischen den Spalten usw. zu definieren .

5. Erzwingen Sie die horizontale Anordnung von Inline-Elementen (z. B. Bildern).

Einige Elemente sind standardmäßig Elemente auf Blockebene, z. B. Bilder (). Sie werden separat angezeigt. Belegen Sie eine Zeile. Wenn wir mehrere Bilder in derselben Zeile platzieren möchten, können wir display:inline-block verwenden, um diese Elemente in Inline-Elemente umzuwandeln.

Fazit

In diesem Artikel werden verschiedene Methoden zum Umgang mit Überlaufinhalten in CSS vorgestellt. Sie können das Layout und den Anzeigeeffekt der Seite steuern, indem Sie diese Methoden rational verwenden. Wenn Sie mehr über das CSS-Layout erfahren möchten, lesen Sie bitte die entsprechende Dokumentation.

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