So umschließen Sie Text in CSS

CSS ist eine Stylesheet-Sprache für Webdesign, die Webseiten schöner und leichter lesbar machen kann. Text nimmt einen großen Teil der Webseiten ein, daher ist die Art und Weise, wie Text umbrochen wird, ein wichtiges Thema beim CSS-Design.

In CSS wird ein Zeilenumbruch als Zeilenumbruch oder Wortumbruch bezeichnet. Dies bezieht sich darauf, wie der Text automatisch umbrochen oder Wortumbruchsymbole hinzugefügt werden, wenn die Länge einer Textzeile eine bestimmte Grenze überschreitet. Im Folgenden wird erläutert, wie Sie den Textumbruch in CSS implementieren.

1. Verwenden Sie das Attribut „Wortumbruch“ in CSS.

In CSS können Sie das Attribut „Wortumbruch“ verwenden, um zu steuern, ob die Wortsegmentierung in der Mitte eines Wortes durchgeführt wird. Standardmäßig bricht der Browser Wörter automatisch in neue Zeilen ein. Durch Festlegen des Attributs „Wortumbruch“ kann der Browser jedoch automatisch Silbentrennungssymbole in der Mitte von Wörtern einfügen, um bessere Zeilenumbrucheffekte zu erzielen. Der spezifische Code lautet wie folgt:

p {
  word-wrap: break-word;
}

Dieser Stil unterbricht Wortzeilen, wenn die Breite des Containers nicht ausreicht, und fügt Silbentrennungssymbole in die Mitte der Wörter ein, um die Integrität der Anordnung sicherzustellen.

2. Verwenden Sie das Attribut „Wortumbruch“ in CSS

Zusätzlich zum Attribut „Wortumbruch“ bietet CSS auch ein weiteres Attribut „Wortumbruch“, um den Zeilenumbruch von Nicht-CJK (China, Japan) zu steuern , und Korea) Zeichen. Bei Verwendung mit den Standardeinstellungen bricht „word-break“ Wörter an beliebigen Stellen im Wort ab, was zu visuellen Unterbrechungen führen kann. Um dieses Problem zu lösen, können Sie das Attribut „word-break“ auf „keep-all“ setzen, sodass Zeilen bei Wörtern nicht umgebrochen werden. Der spezifische Code lautet wie folgt:

p {
  word-break: keep-all;
}

3. Verwenden Sie das „white-space“-Attribut in CSS

Das „white-space“-Attribut in CSS wird verwendet, um die Anzeige von Leerzeichen und Zeilenumbrüchen im Text zu steuern. Standardmäßig ist das Attribut „white-space“ auf „normal“ eingestellt, wodurch zusätzliche Leerzeichen und Zeilenumbrüche im Text ignoriert werden. Wenn Sie diese Leerzeichen und Zeilenumbrüche beibehalten möchten, können Sie das Attribut „white-space“ festlegen auf „pre“ oder „pre-wrap“ umstellen. Der spezifische Code lautet wie folgt:

p {
  white-space: pre-wrap;
}

Dieser Stil behält aufeinanderfolgende Leerzeichen und Zeilenumbrüche im Container bei. Wenn Sie einen Zeilenumbruch im Text erzwingen möchten, können Sie die Markierung „
“ verwenden, zum Beispiel:

<p>这是第一行
这是第二行</p>

Die oben genannten drei häufig verwendeten CSS-Stileigenschaften können den Zeilenumbruch und die Anzeige von Text effektiv steuern. Beim tatsächlichen Webdesign können wir entsprechend der tatsächlichen Situation geeignete Attribute auswählen, um den besten Effekt zu erzielen.

Das obige ist der detaillierte Inhalt vonSo umschließen Sie Text in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!