CSS umbricht nicht und CSS umbricht

CSS ist eine wichtige technische Komponente in der Frontend-Entwicklung. CSS kann zur Optimierung und Verschönerung von Webseiten verwendet werden. Ein sehr wichtiger Aspekt ist die Anpassung des Layouts und Stils des Textes. In CSS gibt es zwei häufig verwendete Eigenschaften: kein Zeilenumbruch und Zeilenumbruch. Unterschiedliche Attributeinstellungen können unterschiedliche Effekte erzeugen.

CSS bricht nicht um

Das Leerraumattribut in CSS kann verwendet werden, um zu steuern, ob Text unterbrochen wird. Es verfügt über die folgenden Werte, die festgelegt werden können :

# 🎜🎜#normal: Standardwert, automatischer Zeilenumbruch
• nowrap: Kein Zeilenumbruch
• pre: Alle Leerzeichen und Zeilenumbrüche beibehalten # 🎜🎜#
• Vorzeilenumbruch: Zeilenumbrüche beibehalten, aber sie werden automatisch umgebrochen
• Vorzeilenumbruch: Leerzeichen und Zeilenumbrüche beibehalten, aber sie werden automatisch umgebrochen
#🎜🎜 #
• Unter diesen kann der Nowrap-Wert dazu führen, dass der Text nicht umbrochen wird. Der Wert von Leerzeichen wird vererbt und kann im übergeordneten Element festgelegt und dann an das untergeordnete Element vererbt werden.

Im folgenden Code wird das div-Element beispielsweise nicht automatisch umgebrochen, wenn der Text zu lang ist, sondern wird weiter verlängert.

<div style="white-space: nowrap;">
  这是一个不会换行的超长文本测试，看看会不会出现换行。
</div>

CSS-Zeilenumbruch

Ähnlich können Sie auch die Eigenschaften „word-break“ und „word-wrap“ in CSS verwenden, um Zeilenumbrüche zu steuern.

Das Wortumbruchattribut kann Zeilenumbrüche innerhalb von Wörtern steuern und wird normalerweise zur Steuerung verschiedener Texte wie englischer Wörter und chinesischer Wörter verwendet. Seine Werte sind wie folgt:

• normal: Standardwert, verwenden Sie die standardmäßige Zeilenumbruchmethode des Browsers

  keep-all: Behalten Sie alle Wörter in einer Zeile , nein Automatischer Zeilenumbruch
  • break-all: Wenn ein einzelnes Zeichen zu lang ist, erzwingen Sie einen Zeilenumbruch (unabhängig von Wortgrenzen)
  • break-word: Wenn das gesamte Wort ist zu lang, erzwinge einen Zeilenumbruch#🎜 🎜#
  • Im folgenden Code ist beispielsweise der Text des p-Elements so eingestellt, dass eine neue Zeile erzwungen wird wenn ein einzelnes Zeichen zu lang ist, über das Wortumbruch-Attribut.

  <p style="word-break: break-all;">
    这里有一段texttexttexttexttexttexttexttexttexttexttext的文本。
  </p>

Das Zeilenumbruch-Attribut wird verwendet, um zu steuern, ob der Text beim Umbrechen Wortgrenzen beibehält. Seine Werte sind wie folgt:

• normal: Standardwert, verwenden Sie die Standard-Zeilenumbruchmethode des Browsers
  break-word: Erzwingen Sie einen Zeilenumbruch, wenn die Das Wort ist zu lang, aber die Wortgrenzen bleiben erhalten ist durch das Zeilenumbruch-Attribut zu lang. Zeilenumbruch, aber Wortgrenzen beibehalten.

  <div style="word-wrap: break-word;">
    这里有一段texttexttexttexttexttexttexttexttexttexttext的文本。
  </div>

  • Fazit
  • In CSS können Sie durch die Leerzeichen-, Wortumbruch- und Zeilenumbruch-Attribute flexibel steuern, ob der Text umgebrochen wird oder nicht. In der tatsächlichen Entwicklung können geeignete Attribute entsprechend den spezifischen Anforderungen ausgewählt und eingestellt werden, um das beste Leseerlebnis und den besten ästhetischen Effekt zu erzielen.

Das obige ist der detaillierte Inhalt vonCSS umbricht nicht und CSS umbricht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!