So erzielen Sie den Ellipseneffekt über den Teil hinaus in HTML

Das Weglassen überschüssiger Teile in HTML ist eine häufige Designanforderung. Wenn Textinhalte die Grenzen überschreiten, kürzen wir ihn normalerweise und ersetzen ihn durch Auslassungspunkte. Dadurch sieht der Inhalt nicht nur sauberer aus, sondern sorgt auch für ein besseres Benutzererlebnis. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS den Effekt erzielen, überschüssige Teile von HTML wegzulassen.

Textüberlaufeigenschaft

Wenn wir die Auswirkung des Weglassens des überschüssigen Teils von HTML erkennen, verwenden wir normalerweise die Textüberlaufeigenschaft von CSS. Seine Funktion besteht darin, anzugeben, wie mit dem überschüssigen Teil umgegangen werden soll, wenn der Textinhalt in einem Element seinen Container überläuft.

Dieses Attribut hat 3 Werte:

• clip: Standardwert, der überschüssige Teil wird abgeschnitten und nicht angezeigt. clip：默认值，超出部分将被裁剪掉，不显示。
• ellipsis：超出部分用省略号代替。
• string：超出部分用给定字符串代替。

其中，最常用的是 ellipsis，因为它能够简单快速地实现省略号效果。

white-space 属性

在使用 text-overflow 属性时，我们还需要设置 white-space 属性。该属性指定元素中的空白如何处理。默认值是 normal，表示合并连续的空白字符并将换行符转换为空格。

如果我们要在文本中保留连续的空格字符，就需要将 white-space 属性设置为 pre-wrap。而且，只有在 white-space 属性被设置为 nowrap 和 pre-wrap

ellipsis: Ersetzen Sie den Überschuss durch Ellipsen.

string: Der überschüssige Teil wird durch den angegebenen String ersetzt.

Unter diesen ist Ellipse die am häufigsten verwendete, da sie den Ellipseneffekt einfach und schnell erzielen kann.

White-Space-Attribut

Bei Verwendung des Text-Overflow-Attributs müssen wir auch das White-Space-Attribut festlegen. Diese Eigenschaft gibt an, wie Leerzeichen innerhalb des Elements behandelt werden. Der Standardwert ist normal, was bedeutet, dass aufeinanderfolgende Leerzeichen zusammengeführt und Zeilenumbrüche in Leerzeichen umgewandelt werden.

Wenn wir fortlaufende Leerzeichen im Text beibehalten möchten, müssen wir das Leerzeichenattribut auf pre-wrap setzen. Darüber hinaus wird Textüberlauf nur wirksam, wenn das Leerraumattribut auf nowrap und pre-wrap gesetzt ist.
• Verwenden von CSS, um den Auslassungseffekt zu erzielen
• Hier ist ein Beispiel für die Verwendung von CSS, um den Auslassungseffekt zu erzielen:

• <style>
    .ellipsis {
      width: 200px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
  
  <div class="ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed consequat magna vel leo sollicitudin convallis. Sed vestibulum auctor purus a tristique.
  </div>

Im obigen Beispiel haben wir ein Element auf Blockebene mit einer Breite erstellt, um den Textinhalt aufzunehmen. Als nächstes setzen wir die Eigenschaft „white-space“ auf „nowrap“, damit aufeinanderfolgende Leerzeichen im Text nicht zusammengeführt werden. Wir verwenden das Overflow-Attribut, um den Überlaufteil auszublenden, und verwenden text-overflow: ellipsis, um ihn durch Ellipsen zu ersetzen.

Angemessene Verwendung von Ellipseneffekten

Obwohl die Verwendung von Ellipseneffekten den Inhalt aufgeräumter machen kann, müssen wir Ellipsen auch angemessen verwenden, um die Benutzererfahrung zu gewährleisten. Hier sind einige Tipps für die richtige Verwendung von HTML-Ellipsen:

🎜🎜Verwenden Sie Ellipsen nur dort, wo es notwendig ist. Wenn Sie den gesamten Text durch Auslassungspunkte ersetzen, wird dies die Benutzer verwirren, da sie nicht wissen, um welchen Text es sich handelt. 🎜🎜Lassen Sie ausreichend Platz für Ellipsen. Im Allgemeinen sollten wir etwas Platz für Auslassungspunkte lassen, um sicherzustellen, dass Benutzer den abgeschnittenen Teil des Textinhalts richtig verstehen können. 🎜🎜Verwenden Sie Auslassungspunkte, wenn Sie lange Textabschnitte lesen. Ellipsen im Text werden oft verwendet, um es den Lesern zu ermöglichen, unnötige Informationen, wie lange Kommentarabsätze oder Artikel, die länger als die Breite des Bildschirms sind, „schnell zu überspringen“. In diesem Fall sorgen Auslassungspunkte für ein besseres Benutzererlebnis, da sie es den Lesern erleichtern, die Zusammenfassung des Textes zu verstehen. 🎜🎜🎜Zusammenfassung🎜🎜In diesem Artikel haben wir vorgestellt, wie man mit CSS den Effekt erzielt, überschüssige Teile in HTML wegzulassen. Um diesen Zweck zu erreichen, verwenden wir hauptsächlich Textüberlauf- und Leerraumeigenschaften. Abschließend geben wir auch einige Vorschläge für die angemessene Verwendung von Auslassungspunkten, um Ihnen bei der Optimierung des Benutzererlebnisses zu helfen. 🎜

Das obige ist der detaillierte Inhalt vonSo erzielen Sie den Ellipseneffekt über den Teil hinaus in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!