So erreichen Sie mehr als Zeilenumbrüche in CSS

Beim Webdesign und der Webentwicklung ist die Anpassung von Texten oder Bildern an einen Container mit einer bestimmten Breite ein häufiges Problem. In den meisten Fällen werden diese Elemente automatisch verkleinert oder gedehnt, um sie an die Breite ihres übergeordneten Containers anzupassen. Wenn der Inhalt eines Elements jedoch die Breite seines übergeordneten Containers überschreitet, müssen Sie die Eigenschaft „overflow-wrap“ in CSS verwenden.

Die Funktion von Beyond Line Wrapping besteht darin, einen erzwungenen automatischen Zeilenumbruch innerhalb eines Containers mit bestimmter Breite zu implementieren, wenn der Elementinhalt nicht lesbar oder vollständig ist, wodurch der Inhalt schöner und leichter lesbar wird.

Es gibt zwei Attributwerte für Beyond Line Break: „normal“ und „break-word“. Ihre Unterschiede sind wie folgt:

1. normal

Standardmäßig wird der Text im Element automatisch passend umgebrochen die Breite seiner Behältergröße. In diesem Fall wird der Text an Wortgrenzen unterbrochen, wodurch die Integrität der Leerzeichen davor und danach gewahrt bleibt.

2. Wortumbruch

Wenn das Attribut „Wortumbruch“ festgelegt ist, wird der Text an jedem Buchstaben oder jeder Zahl umgebrochen, wodurch ein Zeilenumbruch erzwungen wird. Dies ist eine sehr nützliche Eigenschaft, insbesondere wenn Sie sicherstellen möchten, dass einige lange Wörter oder URL-Inhalte den Umfang des Containers nicht überschreiten.

Im Folgenden wird anhand einiger Beispiele gezeigt, wie Sie über den Zeilenumbruch hinausgehen können.

1. Realisieren Sie den Zeilenumbruch langer Wörter

Das Folgende ist ein Absatz mit einem langen Wort, der die Breitenbeschränkung des Containers nicht überschreitet:

<p>
   pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis
</p>

Wenn die Breite des Containers klein ist, wird der Text nicht umgebrochen automatisch. Um dieses Problem zu lösen, verwenden wir das Attribut „Überschreitung des Zeilenumbruchs“:

<p style="overflow-wrap: break-word;">
   pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis pneumonoultramicroscopicsilicovolcanoconiosis
</p>

Der Effekt ist wie folgt:

2. Zeilenumbruch bei Textüberlauf erreichen

Der folgende Absatz überschreitet den Grenzwert nicht Sobald die Containerbreite überschritten wird, läuft der Text über:

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit ex vel luctus dapibus. Curabitur velit arcu, efficitur ut dictum at, pharetra vel nibh. Duis auctor lacus non magna ultricies, vitae sollicitudin enim imperdiet. Fusce adipiscing euismod velit, id rhoncus dolor gravida vel.
</p>

Wenn die Containerbreite klein ist, wird der Inhalt abgeschnitten oder überschreitet die Containerbreite. Um dieses Problem zu lösen, verwenden wir das Attribut „Überschreitung des Zeilenumbruchs“:

<p style="overflow-wrap: break-word;">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi hendrerit ex vel luctus dapibus. Curabitur velit arcu, efficitur ut dictum at, pharetra vel nibh. Duis auctor lacus non magna ultricies, vitae sollicitudin enim imperdiet. Fusce adipiscing euismod velit, id rhoncus dolor gravida vel.
</p>

Der Effekt ist wie folgt:

In einigen Fällen kann die Verwendung des Attributs „Überschreitung des Zeilenumbruchs“ Ihnen effektiv dabei helfen, das Problem der Überschreitung des Containers zu lösen Breite und machen Sie Ihr Webdesign schöner und leichter lesbar.

Das obige ist der detaillierte Inhalt vonSo erreichen Sie mehr als Zeilenumbrüche in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!