Was tun, wenn CSS-Inhalte nicht umgebrochen werden?

CSS ist ein wichtiger Bestandteil des Webdesigns. Es kann Webseiten verschiedene Stile hinzufügen, z. B. Farben, Schriftarten, Layout usw. Unter anderem ist der Inhaltszeilenumbruch auch ein wichtiger Stil in CSS. Wenn wir das Textlayout auf der Seite anpassen müssen, ist der Inhaltszeilenumbruch besonders wichtig.

In CSS verwenden Browser Eigenschaften, um den automatischen Textumbruch zu steuern. Standardmäßig wird Text entsprechend seinem Container umgebrochen, der durch den Zeilenumbruchmechanismus des Browsers bestimmt wird. Manchmal möchten wir jedoch, dass der Text nicht in den Container eingeschlossen wird. In diesem Fall können wir die folgenden Methoden verwenden, um dies zu erreichen.

1. Verwenden Sie das White-Space-Attribut

Das White-Space-Attribut kann steuern, wie Texträume und Zeilenumbrüche angezeigt werden.

Das Leerraumattribut hat vier Werte, nämlich normal, nowrap, pre und pre-wrap. Unter diesen ist „normal“ der Standardwert. Nowrap bedeutet, dass der Text nicht automatisch umgebrochen wird, wenn er den Container überläuft. Pre bedeutet, dass Zeilenumbrüche im Text beibehalten werden, der Text jedoch nicht automatisch am Rand des Containers umgebrochen wird. Pre-Wrap bedeutet, dass der Text nicht automatisch umgebrochen wird Zeilenumbrüche am Rand des Containers aufweist, sollte es sich um einen Zeilenumbruch handeln.

Der Beispielcode lautet wie folgt:

div {
  width: 200px;
  height: 100px;
  white-space: nowrap;
}

Der obige Code verhindert, dass der gesamte Text in einem div-Element mit einer Breite von 200 Pixel und einer Höhe von 100 Pixel automatisch umbrochen wird. Wenn wir das Attribut „white-space“ in „pre“ ändern, bleiben die im Text erscheinenden Zeilenumbrüche erhalten. Beim Vorumbruch kann der Text an den Rändern des Containers Zeilenumbrüche aufweisen.

2. Verwenden Sie das Textüberlaufattribut

Das Textüberlaufattribut ersetzt den Überlaufinhalt durch die angegebenen Zeichen, wenn der Text den Container überläuft.

Das Textüberlaufattribut hat drei Werte, nämlich Clip, Ellipse und String. Unter diesen ist „clip“ der Standardwert, was bedeutet, dass der Text ausgeblendet wird, wenn der Text überläuft. Auslassungspunkte bedeuten, dass die Auslassungszeichen am übergelaufenen Text angezeigt werden die Ellipsen.

Der Beispielcode lautet wie folgt:

div {
  width: 200px;
  height: 100px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

Der obige Code ersetzt den Text in einem div-Element mit einer Breite von 200 Pixel und einer Höhe von 100 Pixel durch Auslassungspunkte, wenn er überläuft.

3. Verwenden Sie das Wortumbruch-Attribut

Das Wortumbruch-Attribut kann steuern, wie Wörter unterbrochen und umbrochen werden.

Das Attribut „word-break“ hat drei Werte: „Normal“, „Break-All“ und „Keep-All“. Unter diesen ist „normal“ der Standardwert, was bedeutet, dass der Browser ein Wort an einer beliebigen Stelle umbrechen kann; „alles umbrechen“ bedeutet, dass Zeilen innerhalb des Wortes umbrochen werden; „alles behalten“ bedeutet, dass Zeilenumbrüche bei Zeichen wie Chinesisch oder Japanisch verhindert werden.

Der Beispielcode lautet wie folgt:

div {
  width: 200px;
  height: 100px;
  word-break: keep-all;  
}

Der obige Code verhindert, dass die chinesischen oder japanischen Zeichen im Text in einem div-Element mit einer Breite von 200 Pixel und einer Höhe von 100 Pixel umgebrochen werden.

Kurz gesagt, um Inhalte ohne Zeilenumbrüche in CSS zu erreichen, können wir Leerzeichen, Textüberlauf, Wortumbruch und andere Attribute verwenden, um dies zu erreichen. Die Verwendung dieser Attribute kann die Lesbarkeit und Ästhetik von Webseiten verbessern und das Benutzererlebnis verbessern.

Das obige ist der detaillierte Inhalt vonWas tun, wenn CSS-Inhalte nicht umgebrochen werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!