CSS verhindert das Umbrechen von Text

Beim Webdesign und der Webentwicklung müssen wir normalerweise das Layout und den Stil von Seitenelementen steuern. Eines der häufigsten Probleme beim Textlayout besteht darin, zu verhindern, dass Text umbrochen wird. In diesem Artikel werden einige gängige Methoden in CSS vorgestellt, die Ihnen bei der Lösung dieses Problems helfen.

1. Leerraumattribut

Das white-space-Attribut bestimmt, wie mit dem Leerraum im Elementfeld umgegangen wird. Es verfügt über 5 optionale Werte . : normal, nowrap, pre, pre-wrap, pre-line . Ihre Auswirkungen sind: white-space属性决定元素盒子中的空白如何处理，它有5个取值可选：normal、nowrap、pre、pre-wrap、pre-line。它们的效果分别是：

• normal：默认值，合并多余空白，文字不换行，文字在一行上放不下就自动换行；
• nowrap：不换行，这相当于把normal和pre的特性结合起来；
• pre：保留多余空白、不合并、不换行，如果需要换行需要手动添加`
  `；
• pre-wrap：保留多余空白、不合并、自动换行，如果出现需要换行的情况，则自动进行换行；
• pre-line：合并多余空白，文字在一行上放不下就自动换行。

因此，当我们需要让文字不自动换行时，可以使用white-space: nowrap。

div {
  white-space: nowrap;
}

当然，如果想要保留多余空白，也可以使用其他取值。例如，如果要使文字在一行上完整显示，可以使用white-space: pre。

div {
  white-space: pre;
}

2. word-break属性

在设置了white-space属性之后，如果文本长度超过了盒子的宽度，则会进行自动换行。这时需要使用word-break属性来控制文字的断行，它有3个取值可选：normal、break-all、keep-all。它们的效果分别是：

• normal：默认值，按照标准的断词规则，在单词之间进行断行；
• break-all：在单词之间进行断行，并且在英文单词内不考虑任何规则断行；
• keep-all：在单词之间断行，但是英文单词内不断行。

因此，可以通过将word-break属性的取值设置为keep-all，来让文字不进行自动换行。

div {
  white-space: nowrap;
  word-break: keep-all;
}

3. overflow属性

在部分情况下，即使通过white-space和word-break属性设置了正确的文字排版方式，文本长度也可能超出了盒子的宽度。这时需要使用overflow属性来控制文本的溢出效果。overflow属性有4个取值可选：visible、hidden、scroll、auto。它们的效果分别是：

• visible：默认值，不做任何处理，允许内容超过盒子范围显示在盒子外部；
• hidden：溢出部分隐藏，不可见；
• scroll：显示滚动条，用户可以通过滚动条来查看超出部分；
• auto：根据实际需要显示滚动条。

如果想让文字在一行上显示，不自动换行，并且溢出部分隐藏，可以结合使用white-space和overflow属性。

div {
  white-space: nowrap;
  overflow: hidden;
}

4. text-overflow属性

当使用overflow: hidden属性隐藏文本溢出部分时，有可能会导致用户看不到完整的文本内容。这时可以使用text-overflow属性来控制文本的溢出效果。text-overflow属性有2个取值可选：clip、ellipsis。它们的效果分别是：

• clip：将文本截断，并隐藏超出部分，不添加省略符号；
• ellipsis：将文本截断，并隐藏超出部分，添加省略符号（...）。

因此，可以通过将text-overflow属性的取值设置为ellipsis

• normal: Standardwert, überschüssiges Leerzeichen zusammenführen, Text wird nicht umgebrochen, Text wird automatisch umgebrochen, wenn er nicht in eine Zeile passt;
• nowrap: Kein Zeilenumbruch, was der Kombination der Funktionen von normal und pre entspricht; pre: Überschüssigen Leerraum beibehalten, nicht zusammenführen und Zeilen nicht umbrechen. Wenn Sie Zeilen umbrechen müssen, müssen Sie „
  “ manuell hinzufügen;
• pre-wrap: Überschüssigen Leerraum beibehalten, kein Zusammenführen, automatischer Zeilenumbruch, wenn Zeilenumbruch erforderlich ist, automatischer Zeilenumbruch
• pre-line : Überschüssiger Leerraum wird zusammengeführt und der Text wird automatisch umbrochen, wenn er nicht in eine Zeile passt.

Wenn wir also verhindern müssen, dass Text automatisch umgebrochen wird, können wir white-space: nowrap verwenden.

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Wenn Sie überschüssigen Leerraum beibehalten möchten, können Sie natürlich auch andere Werte verwenden. Wenn Sie beispielsweise möchten, dass der Text vollständig in einer Zeile erscheint, können Sie white-space: pre verwenden.

div::after {
  content: "a0";
}

2. Wortumbruch-Attribut

Wenn nach dem Festlegen des white-space-Attributs die Textlänge die Breite des Felds überschreitet, wird es Führt einen automatischen Zeilenumbruch durch. Zu diesem Zeitpunkt müssen Sie das Attribut word-break verwenden, um den Zeilenumbruch von Text zu steuern. Es verfügt über drei optionale Werte: normal, break-all, <code>keep-all. Ihre Auswirkungen sind:

• normal: Standardwert, Zeilenumbrüche zwischen Wörtern gemäß Standard-Wortumbruchregeln
• break-all;

: Zeilenumbrüche zwischen Wörtern und keine Regeln für Zeilenumbrüche innerhalb englischer Wörter berücksichtigen.

keep-all: Zeilenumbrüche zwischen Wörtern OK, aber das Englische Worte sind nicht in Ordnung.

Daher können Sie den Wert des Attributs word-break auf keep-all setzen, um zu verhindern, dass der Text automatisch unterbrochen wird brechen. #🎜🎜#rrreee#🎜🎜#3. Überlaufattribut#🎜🎜##🎜🎜#In einigen Fällen sogar durch die Attribute white-space und word-break Bei korrekt eingestelltem Textlayout kann die Textlänge die Breite des Felds überschreiten. Zu diesem Zeitpunkt müssen Sie das Attribut overflow verwenden, um den Überlaufeffekt von Text zu steuern. Das Attribut overflow hat 4 optionale Werte: visible, hidden, scroll, auto Code>. Ihre Auswirkungen sind: #🎜🎜#

• visible: Standardwert, es wird keine Verarbeitung durchgeführt, sodass Inhalte außerhalb des Boxbereichs außerhalb der Box angezeigt werden können;
• versteckt: Der Überlaufteil ist ausgeblendet und unsichtbar;
• scrollen: Die Bildlaufleiste wird angezeigt und der Benutzer kann den Überlaufteil durch sehen Bildlaufleiste;
• auto: Bildlaufleisten entsprechend den tatsächlichen Anforderungen anzeigen.

#🎜🎜#Wenn Sie möchten, dass der Text in einer Zeile ohne automatischen Zeilenumbruch angezeigt und der Überlaufteil ausgeblendet wird, können Sie white-space und verwenden overflow code>Eigenschaft. #🎜🎜#rrreee#🎜🎜#4. Textüberlauf-Attribut#🎜🎜##🎜🎜#Wenn das Attribut <code>overflow: versteckt zum Ausblenden des Textüberlaufteils verwendet wird, kann dies dazu führen, dass der Benutzer dies tut Wird nicht angezeigt. Vollständiger Textinhalt. Zu diesem Zeitpunkt können Sie das Attribut text-overflow verwenden, um den Überlaufeffekt von Text zu steuern. Das Attribut text-overflow hat zwei optionale Werte: clip, ellipsis. Ihre Auswirkungen sind: #🎜🎜#

• clip: Den Text abschneiden und den überschüssigen Teil ausblenden, ohne Auslassungspunkte hinzuzufügen
• Auslassungspunkte : Den Text abschneiden, den überschüssigen Teil ausblenden und Auslassungszeichen hinzufügen (...).

#🎜🎜# Daher können Sie den Wert des Attributs text-overflow auf ellipsis setzen, um den zu langen Text abzuschneiden und Ellipsen hinzuzufügen . #🎜🎜#rrreee#🎜🎜#5. Pseudoelemente verwenden#🎜🎜##🎜🎜#Zusätzlich zu den oben genannten Methoden können Sie auch steuern, dass Text nicht automatisch umgebrochen wird, indem Sie Pseudoelemente in CSS verwenden. Beispielsweise können Sie „

Das obige ist der detaillierte Inhalt vonCSS verhindert das Umbrechen von Text. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!