So legen Sie fest, dass Text nicht in CSS umbrochen wird

Im Webdesign ist Text eines der wichtigsten Elemente. Wir müssen darüber nachdenken, wie wir den Text am besten auf der Seite präsentieren können. Eines der häufigsten Probleme besteht darin, das Umbrechen von Text zu verhindern. In diesem Artikel erfahren Sie, wie Sie mithilfe von CSS steuern können, dass Text nicht umbrochen wird.

1. White-Space-Attribut

Das White-Space-Attribut ist ein wichtiges Attribut in CSS und wird verwendet, um zu steuern, wie Leerzeichen in Elementen verarbeitet werden. Es umfasst hauptsächlich die folgenden Werte:

1. normal

Dies ist der Standardwert, was bedeutet, dass Leerzeichen vom Browser ignoriert werden. Wenn aufeinanderfolgende Leerzeichen vorhanden sind, zeigt der Browser nur ein Leerzeichen an.

2. pre

pre bedeutet, Leerzeichen beizubehalten, wodurch die in HTML geschriebenen Leerzeichen erhalten bleiben, was dazu führt, dass die Leerzeichen in HTML beibehalten werden auf der Seite angezeigt werden.

3. nowrap

nowrap bedeutet, dass Zeilenumbrüche nicht zulässig sind, wenn innerhalb einer Zeile nicht genügend Platz für die Anzeige von Text vorhanden ist den Umfang des Elements überlaufen.

4. pre-wrap

pre-wrap bedeutet, Leerzeichen in HTML beizubehalten und Zeilenumbrüche zuzulassen.

5. pre-line

pre-line bedeutet, Leerzeichen in HTML beizubehalten, aber aufeinanderfolgende Leerzeichen zu ignorieren und Zeilenumbrüche zuzulassen.

2. Zeilenumbruch-Attribut

Das Zeilenumbruch-Attribut wird verwendet, um zu steuern, wie der Browser Wörter verarbeitet. Wenn die Wörter in einer Zeile zu lang sind, wird die Breite des Elements über die Breite des übergeordneten Elements hinaus vergrößert, was sich auf das Layout der Seite auswirkt.

1. normal

Dies ist der Standardwert, was bedeutet, dass der Browser keine Zeilenumbrüche in Wörtern umbricht.

2. break-word

break-word unterbricht Zeilenumbrüche innerhalb des Wortes, um zu verhindern, dass das Wort das Layout beeinträchtigt.

3. Die kombinierte Verwendung von Leerzeichen und Zeilenumbruch

Die Attribute Leerzeichen und Zeilenumbruch können zusammen verwendet werden, um den Effekt der Steuerung des Textumbruchs zu erzielen .

1. white-space:nowrap;

word-wrap:break-word;

Das bedeutet nicht erlaubt Umbruch, aber wenn das Wort die Breite des übergeordneten Elements überschreitet, weil das Wort zu lang ist, wird der Umbruch innerhalb des Wortes unterbrochen.

2. white-space:pre-wrap;

word-wrap:break-word;

Das bedeutet Behält Leerzeichen in HTML bei und ermöglicht Zeilenumbrüche, während Zeilenumbrüche innerhalb von Wörtern unterbrochen werden.

Durch die Kombination mehrerer Werte können wir präzisere Steuerungseffekte erzielen.

Zusammenfassung:

Die Steuerung von Text ohne Zeilenumbruch durch CSS kann durch die Verwendung des Leerraumattributs und des Zeilenumbruchattributs in Kombination mit mehreren Werten erreicht werden. Dies ist sehr wichtig für die Layoutwirkung der Website. Wenn Sie die vertikale Ausrichtung von Text, das Ausblenden von Textüberläufen und andere Spezialeffekte steuern möchten, können Sie es auch in Verbindung mit anderen CSS-Eigenschaften verwenden. Nutzen Sie es einfach flexibel und Sie erhalten mit halbem Aufwand im Webdesign das doppelte Ergebnis.

Das obige ist der detaillierte Inhalt vonSo legen Sie fest, dass Text nicht in CSS umbrochen wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!