So verwenden Sie CSS, um Zeilenumbrüche zu erreichen (drei Methoden)

Zeilenumbruch bezieht sich auf das Verhalten, automatisch zur nächsten Zeile zu wechseln, wenn Text oder anderer Inhalt das Ende der Zeile erreicht. Im Webdesign können korrekte Zeilenumbrüche dafür sorgen, dass die Seite komfortabler und natürlicher aussieht. Um in CSS korrekte Zeilenumbrüche zu erreichen, ist das Verständnis einiger Prinzipien und Techniken erforderlich. In diesem Artikel werden Ihnen verschiedene Methoden vorgestellt, wie Sie mit CSS Zeilenumbrüche erzielen.

Methode 1: Zeilenumbruch verwenden

In CSS3 steht das Attribut „Zeilenumbruch“ zur Verfügung, mit dem sich der Textumbruch steuern lässt. Dieses Attribut hat die folgenden Werte:

• normal: der Standardattributwert, was bedeutet, dass der Text nicht eingeschränkt ist und die Grenze überschreiten kann;
• break-word: bedeutet, dass das Wort gelöscht wird, wenn der Text die Grenze überschreitet automatisch abgeschnitten und umbrochen, aber wenn das Wort selbst sehr lang ist und dennoch die Grenze überschreitet;
• irgendwo: bedeutet, dass der Text überall umgebrochen werden kann; und wenn ein langes Wort gefunden wird, wird die neue Zeile abgeschnitten.
• Die Verwendung des Zeilenumbruchs ist ebenfalls sehr einfach. Sie müssen lediglich die entsprechenden Attribute in CSS festlegen. Beispiel:

p {
  word-wrap: break-word;
}

Der obige Code führt dazu, dass der Text im p-Element automatisch abgeschnitten wird, wenn er auf eine Grenze stößt, und entsprechend der Wortlänge umgebrochen wird.

Methode 2: Wortumbruch verwenden

Wortumbruch ist nicht immer die ideale Lösung, da Sie manchmal vermeiden möchten, ein Wort abzuschneiden, und es stattdessen an einer beliebigen Stelle umbrechen möchten. In diesem Fall können wir das Wortumbruch-Attribut verwenden. Das Attribut

word-break hat die folgenden Werte:

normal: Der Standardattributwert bedeutet, dass der Text eingeschränkt ist und ein Abschneiden in der Mitte des Wortes nicht zulässig ist.

• break-all: Zeigt einen Zeilenumbruch an jeder Position an, sogar mitten in einem Wort. Dies zerstört jedoch die Integrität des Wortes und wird nicht empfohlen.
• keep-all: Gibt an, dass der Text nur an Leerzeichen oder Bindestrichen unterbrochen wird, geeignet für asiatische Sprachen und andere Sprachen, die keine Leerzeichen verwenden.
• Wenn Sie beispielsweise ein vollständiges chinesisches Zeichen im Textzeilenumbruch unterbrechen möchten, können Sie den folgenden Code verwenden:

p {
  word-break: break-all;
}

Methode 3: White-Space verwenden

White-Space wird in CSS zur Steuerung von Leerzeichen verwendet und Zeilenumbrüche in Texteigenschaften. Es hat die folgenden Werte:

normal: der Standardattributwert, der bedeutet, dass mehrere Leerzeichen und Zeilenumbrüche im Text zu einem Leerzeichen zusammengeführt werden.

• pre: bedeutet, dass mehrere Leerzeichen und Zeilenumbrüche im Text zusammengeführt werden beibehalten, nicht zusammengeführt;
• nowrap: Gibt an, dass der Text nicht automatisch umgebrochen wird.
• Vorumbruch: Gibt an, dass mehrere Leerzeichen und Zeilenumbrüche im Text beibehalten werden, die Zeilen jedoch automatisch umbrochen werden und keine horizontalen Bildlaufleisten angezeigt werden.
• Vorzeile: Gibt an, dass mehrere Leerzeichen im Text zu einem Leerzeichen zusammengeführt werden, Zeilenumbrüche jedoch beibehalten werden, automatischer Zeilenumbruch erfolgt und keine horizontale Bildlaufleiste angezeigt wird.
• Wenn Sie beispielsweise in mehreren Zeilen von Codekommentaren die ursprünglichen Leerzeichen und Zeilenumbrüche beibehalten möchten, können Sie den folgenden Code verwenden:

.comment {
  white-space: pre;
}

Dadurch kann sichergestellt werden, dass das Format des auf der Seite angezeigten Texts konsistent ist mit dem Format im Originalcode.

Zusammenfassung

Um in CSS korrekte Zeilenumbrüche zu erzielen, müssen einige Tricks bekannt sein. Verwenden Sie die drei Attribute Zeilenumbruch, Wortumbruch und Leerraum, um einen automatischen Zeilenumbruch, Wortumbruch und die Beibehaltung von Leerräumen im Text zu erreichen. Korrekte Zeilenumbrüche können eine Seite lesbarer, schöner und professioneller machen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS, um Zeilenumbrüche zu erreichen (drei Methoden). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!