So lösen Sie einen CSS-Textüberlauf

Beim Webdesign kommt es häufig vor, dass Texte die Grenzen von Elementen überschreiten. Ein Textüberlauf kann das Design-Layout beschädigen und die Benutzererfahrung beeinträchtigen, aber gute CSS-Kenntnisse können uns bei der Lösung dieses Problems helfen.

Es gibt tatsächlich mehrere Möglichkeiten, die Textverarbeitung zu steuern, und im Folgenden werden sie anhand praktischer Beispiele vorgestellt.

1. Ellipsis

Ellipsis ist die am häufigsten verwendete Methode zur Textkürzung, mit der einzelne oder mehrere Textzeilen gekürzt werden können.

Einzeilige Auslassungspunkte

In Situationen, in denen einzeiliger Text überfüllt ist, ist es eine Lösung, die Breite des Textcontainers und den Stil der Auslassungspunkte über den Text hinaus festzulegen.

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

Im Code ist das White-Space-Attribut auf nowrap gesetzt, was sicherstellt, dass der Text in einer Zeile angezeigt wird, ohne dass zusätzlicher Leerraum entsteht. Textüberlauf: Mit Ellipsen können Zeichen im Container, die die Breite des Containers überschreiten, ausgeblendet und durch Ellipsen ersetzt werden, wenn der Container klein ist.

Mehrzeiliges Auslassen

Wenn mehrzeiliger Text die Grenze überschreitet, können Sie die Anzahl der Zeilen festlegen, um den Text innerhalb des Bereichs der Zeilenanzahl anzuzeigen. Die folgenden CSS-Eigenschaften können angewendet werden:

.text-overflow {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

Verwenden Sie in diesem Code display: -webkit-box und -webkit-box-orient: Vertical, um den Textinhalt festzulegen auf „Vertikal ausgerichtete Flexbox“ und begrenzen Sie den Text auf 3 Zeilen, indem Sie das Attribut -webkit-line-clamp festlegen. Verwenden Sie abschließend overflow: versteckt, um etwaigen Überlauftext zu steuern. display: -webkit-box 和 -webkit-box-orient: vertical 将文本内容设置为垂直方向的弹性盒子，并通过设置 -webkit-line-clamp 属性将文本限定为3行。最后，使用 overflow: hidden 控制任何超出的文本。

2. 滚动文本

另一个解决超出文本的方法是让它在文本容器内滚动。这个方法可以在文本容器中按预定义的速度自动滚动文本，让超出的文本得到适当的处理。以下是相应的 CSS 属性：

.text-scroll {
  white-space: nowrap;
  overflow: hidden;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  100% {
    transform: translateX(-100%);
  }
}

在此设置中， white-space: nowrap 和 overflow: hidden 将文本限制为 1 行并且会限制任何超出的文本。animation 则定义了一个 marquee 动画， 将文本向左滚动， infinite 属性使文本永无止境地滚动。

3. 处理空格和连字符

另一种解决溢出文本的方法是通过处理空格和连字符。这可以确保文本不被截断且完整地呈现给用户。以下是相应的 CSS 属性：

.text-wrap {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: break-word;
}

在代码中 word-wrap: break-word 处理任何超出文本的单词或单字符，确保整个词或字符出现在下一行，并且它不会被破坏。 white-space: pre-wrap 将处理空格和连字符，确保它们的位置不会破坏文本内容。另外， word-break: break-all 和 overflow-wrap: break-word

Lauftext

Eine andere Lösung für überlaufenden Text besteht darin, ihn innerhalb des Textcontainers scrollen zu lassen. Diese Methode kann den Text im Textcontainer automatisch mit einer vordefinierten Geschwindigkeit scrollen, sodass der überschüssige Text angemessen verarbeitet werden kann. Hier sind die entsprechenden CSS-Eigenschaften:

rrreee🎜In dieser Einstellung begrenzen white-space: nowrap und overflow: versteckt den Text auf 1 Zeile und begrenzen jeglichen darüber hinausgehenden Text. Animation definiert eine marquee-Animation, um den Text nach links zu scrollen, und das infinite-Attribut sorgt dafür, dass der Text endlos scrollt. 🎜
🎜Umgang mit Leerzeichen und Bindestrichen 🎜🎜🎜Eine weitere Möglichkeit, überlaufenden Text zu beheben, ist der Umgang mit Leerzeichen und Bindestrichen. Dadurch wird sichergestellt, dass der Text nicht abgeschnitten wird und dem Benutzer vollständig präsentiert wird. Hier sind die entsprechenden CSS-Eigenschaften: 🎜rrreee🎜Im Code behandelt word-wrap: break-word jedes Wort oder einzelne Zeichen, das über den Text hinausgeht, und stellt sicher, dass das gesamte Wort oder Zeichen in der nächsten Zeile erscheint. und es wird nicht zerstört. white-space: pre-wrap verarbeitet Leerzeichen und Bindestriche und stellt sicher, dass deren Platzierung den Textinhalt nicht unterbricht. Darüber hinaus stellen die Attribute word-break: break-all und overflow-wrap: break-word sicher, dass überlaufender Text das Design des Textbereichs nicht stört. 🎜🎜Zusammenfassung🎜🎜Mit den oben genannten CSS-Techniken können Sie das Problem des Textüberlaufs kontrollieren und lösen und so für eine reibungslosere und bessere Benutzererfahrung für Websites und Anwendungen sorgen. In Ihren eigenen Projekten wird das Experimentieren mit diesen CSS-Eigenschaften Ihren Benutzern definitiv ein besseres Erlebnis bieten. 🎜

Das obige ist der detaillierte Inhalt vonSo lösen Sie einen CSS-Textüberlauf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!