CSS umschließt den Stil nicht

Beim Webdesign sind die Schönheit und Lesbarkeit des Layouts entscheidend für das Benutzererlebnis der Seite. Wenn ein langer Text nicht automatisch umgebrochen werden kann, beeinträchtigt dies das Leseerlebnis des Benutzers, was nicht nur die Schönheit der Seite beeinträchtigt, sondern auch das Benutzererlebnis beeinträchtigt. Daher ist es beim Entwerfen von Webseiten eine sehr wichtige Fähigkeit, CSS-Stile korrekt zu verwenden, um einen automatischen Zeilenumbruch zu erreichen.

In CSS gibt es mehrere Eigenschaften, die den Textumbruch steuern können. Unter diesen ist das Attribut white-space am gebräuchlichsten. Es steuert, ob das Element Leerzeichen und Zeilenumbrüche beibehält und wie mit Leerzeichen und Zeilenumbrüchen im Text umgegangen wird. white-space 属性，这个属性控制元素是否保留空格和换行符，以及如何处理文本中的空格和换行符。

白板符（white-space）属性有以下三个取值：

1. normal：默认值。标准的换行规则适用，连续的空格和换行符会被压缩为一个空格或者一个换行符，除非在文本内部使用了CSS或者HTML来进行换行。
2. pre：文本中的空格和换行符会被保留，文本将按照原样显示。
3. nowrap：文本在遇到空格或换行符时不会换行，而是继续在同一行上显示。

下面我们将实现三个不换行的示例，来演示如何在CSS中使用 white-space 属性实现不换行样式。

示例一：强制文本在同一行上显示

在这个示例中，我们将展示如何使文本在一个行内显示，不进行换行处理。我们将使用 white-space 属性的 nowrap 值来实现此目的。具体实现方法如下：

.nowrap {
  white-space: nowrap;
}

这个样式将会强制所有元素的文本内容在同一行上显示，在遇到空格或者换行符时不会换行。下面我们来看一个实例：

<div class="nowrap">
  这是一个很长的文本，我们在这里使它不进行换行处理。
</div>

这里的文本将会在遇到空格或者换行符时不会进行换行处理，而会一直在同一行上显示。

示例二：文字超出容器部分隐藏

在这个示例中，我们将展示如何使文本在遇到宽度限制时，超出容器部分进行隐藏。我们将使用 overflow 属性和 text-overflow 属性来实现此目的。具体实现方法如下：

.overflow {
  width: 300px; /* 给容器指定宽度，超出部分进行隐藏 */
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 超出部分进行隐藏 */
  text-overflow: ellipsis; /* 超出部分使用“...”进行省略 */
}

这个样式将会对元素进行限制宽度，超出部分进行隐藏，并使用“...”进行省略。下面我们来看一个实例：

<div class="overflow">
  这是一个很长的文本，我们将它放在容器中限制宽度，并使超出部分进行隐藏，使用“...”进行省略。
</div>

这里的文本在超出容器的部分将会被省略，并用“...”代替。

示例三：单词不被分割

在这个示例中，我们将展示如何避免单词被分割在不同的行中。我们将使用 white-space 属性的 pre

Das Leerraumattribut hat die folgenden drei Werte:

1. normal: Standardwert. Es gelten die Standardregeln für den Zeilenumbruch, und aufeinanderfolgende Leerzeichen und Zeilenumbrüche werden zu einem einzigen Leerzeichen oder Zeilenumbruch komprimiert, es sei denn, CSS oder HTML wird zum Umbrechen von Zeilen im Text verwendet.
2. pre: Leerzeichen und Zeilenumbrüche im Text bleiben erhalten und der Text wird unverändert angezeigt.
3. nowrap: Der Text wird nicht umgebrochen, wenn er auf ein Leerzeichen oder ein Zeilenumbruchzeichen trifft, sondern wird weiterhin in derselben Zeile angezeigt.

Im Folgenden implementieren wir drei Beispiele ohne Zeilenumbruch, um zu demonstrieren, wie Sie das Attribut white-space in CSS verwenden, um Stile ohne Zeilenumbruch zu implementieren.

Beispiel 1: Erzwingen Sie, dass Text in derselben Zeile angezeigt wird

In diesem Beispiel zeigen wir, wie Sie dafür sorgen, dass Text in einer Zeile ohne Umbruch angezeigt wird. Um dies zu erreichen, verwenden wir den nowrap-Wert des white-space-Attributs. Die spezifische Implementierungsmethode lautet wie folgt:

.no-split {
  white-space: pre;
}

Dieser Stil erzwingt, dass der Textinhalt aller Elemente in derselben Zeile angezeigt wird, und wird nicht umbrochen, wenn auf ein Leerzeichen oder ein Zeilenumbruchzeichen gestoßen wird. Schauen wir uns ein Beispiel an: 🎜

<div class="no-split">
  这是一个带有多个空格的文本，我们将使单词不被分割在不同的行中。
</div>

🎜Der Text wird hier nicht umgebrochen, wenn ein Leerzeichen oder ein Zeilenumbruchzeichen auftritt, sondern wird immer in derselben Zeile angezeigt. 🎜

Beispiel 2: Den Text außerhalb des Containers ausblenden

🎜In diesem Beispiel zeigen wir, wie der Text außerhalb des Containers ausgeblendet wird, wenn er auf die Breitenbeschränkung stößt. Um dies zu erreichen, verwenden wir das Attribut overflow und das Attribut text-overflow. Die spezifische Implementierungsmethode lautet wie folgt: 🎜rrreee🎜Dieser Stil begrenzt die Breite des Elements, blendet den überschüssigen Teil aus und verwendet „…“, um ihn wegzulassen. Schauen wir uns unten ein Beispiel an: 🎜rrreee🎜Der Text hier wird außerhalb des Containers weggelassen und durch „…“ ersetzt. 🎜

Beispiel 3: Wörter werden nicht geteilt

🎜In diesem Beispiel zeigen wir, wie man verhindert, dass Wörter in verschiedene Zeilen aufgeteilt werden. Um dies zu erreichen, verwenden wir den pre-Wert des white-space-Attributs. Die spezifische Implementierungsmethode lautet wie folgt: 🎜rrreee🎜Dieser Stil behält das ursprüngliche Format der Wörter im Text bei, d. h. verhindert, dass die Wörter in verschiedene Zeilen aufgeteilt werden. Schauen wir uns unten ein Beispiel an: 🎜rrreee🎜 Die Leerzeichen hier bleiben entsprechend dem Format im Text erhalten und die Wörter werden nicht in verschiedene Zeilen aufgeteilt. 🎜🎜Zusammenfassend zeigt das obige Beispiel, wie man mithilfe von CSS-Stilen den Textumbruch steuert. Beim Entwerfen von Webseiten kann die genaue Verwendung dieser Attribute die Ästhetik und das Benutzererlebnis der Webseite verbessern. 🎜

Das obige ist der detaillierte Inhalt vonCSS umschließt den Stil nicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!