CSS, das Zeilenumbrüche deaktiviert

CSS, das Zeilenumbrüche verbietet

Im Webdesign stoßen wir häufig auf Situationen, in denen Zeilenumbrüche verboten werden müssen. Sie müssen beispielsweise einen langen Link oder eine Bild-URL in einen Text einfügen. Wenn sich diese Links über zwei oder sogar mehr Zeilen erstrecken, wird die Ästhetik der Seite zerstört und das Leseerlebnis des Benutzers beeinträchtigt. An dieser Stelle müssen wir CSS verwenden, um Zeilenumbrüche zu deaktivieren.

Es gibt zwei Eigenschaften in CSS, mit denen Zeilenumbrüche verhindert werden können, nämlich „white-space“ und „word-break“.

1. white-space-Attribut

white-space-Attribut wird zur Steuerung von Leerzeichen und Zeilenumbrüchen in Stilelementen verwendet. Es hat die folgenden Werte:

• normal: Standardwert, der unter normalen Umständen Leerzeichen und Zeilenumbrüche angibt
• nowrap: Zeilenumbrüche verbieten, aber Leerzeichen zulassen
• pre: Leerzeichen und Zeilenumbrüche beibehalten, aber nicht automatisch umbrechen
• pre-wrap: Leerzeichen und Zeilenumbrüche beibehalten, automatisch an die entsprechende Position umbrechen
• pre-line: Zeilenumbrüche verbieten, aber Leerzeichen sind zulässig und Zeilen werden automatisch an der entsprechenden Stelle umgebrochen.

Wir können das Attribut nowrap verwenden, um Zeilenumbrüche innerhalb eines Elements zu verhindern. Beispielsweise wird der Text im folgenden Beispiel gezwungen, in einer Zeile angezeigt zu werden:

<p style="white-space:nowrap;">This is a sample text that will not be wrapped.</p>

2. Wortumbruch-Attribut

Das Wortumbruch-Attribut wird verwendet, um die Art und Weise zu steuern, wie Wörter umbrochen werden, und hat Folgendes Werte:

• normal: Standardwert, versuchen Sie, beim Zeilenumbruch dem Wort zu folgen
• break-all: Erzwingen Sie einen Zeilenumbruch, wenn das Wort zu lang ist
• keep-all: Wenn eine Zeichenfolge bestimmte ostasiatische Zeichen enthält ( B. Chinesisch, Japanisch, Koreanisch usw.), dann wird das Wort nicht umgebrochen

Wir können das Break-All-Attribut verwenden, um den Zeilenumbruch in einem Element zu verhindern. Beispielsweise wird der lange URL-Link im folgenden Beispiel gezwungen, umgebrochen zu werden:

<p style="word-break:break-all;">https://www.example.com/es?hl=zhcn&tab=rw</p>

Es ​​ist zu beachten, dass ihre Prioritäten unterschiedlich sind, wenn die Attribute „Leerraum“ und „Wortumbruch“ gleichzeitig in einem Element verwendet werden. Insbesondere hat das Attribut „word-break“ Vorrang vor dem Attribut „white-space“. Das heißt, wenn Sie Zeilenumbrüche erzwingen und alle Leerzeichen beibehalten möchten, sollten Sie „word-break: break-all;“ verwenden, aber nicht „white-space: pre-wrap: break“. -alle;.

Darüber hinaus können wir bei der tatsächlichen Verwendung diese CSS-Stile zur CSS-Datei hinzufügen und aufrufen, um den Zweck der Verschönerung der Webseite zu erreichen.

Das Obige ist eine Einführung in CSS-Techniken zum Deaktivieren von Zeilenumbrüchen. Ich hoffe, es wird Ihnen hilfreich sein.

Das obige ist der detaillierte Inhalt vonCSS, das Zeilenumbrüche deaktiviert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!