So erzielen Sie mit CSS den Effekt, dass die Anzeigeauslassungspunkte überschritten werden

Auslassungspunkte überschreiten bezieht sich in CSS auf eine Möglichkeit, den Textinhalt über CSS-Eigenschaftseinstellungen in Form von Auslassungspunkten anzuzeigen, wenn der Text innerhalb eines Elements die Breite oder Höhe seines Containers überschreitet.

Wenn der Text unter normalen Umständen überläuft, verschiebt der Browser den Text automatisch zur Anzeige in die nächste Zeile. In einigen Fällen, insbesondere im mobilen oder responsiven Design, möchten wir jedoch den Textinhalt in einer Zeile anzeigen und ihn in Form von Auslassungspunkten anzeigen, wenn der Text die Breite des Containers überschreitet.

Das „excess omitted“-Attribut in CSS kann uns dabei helfen, diesen Effekt zu erzielen. Hier sind zwei häufig verwendete Überlauf- und Auslassungsattribute in CSS: Textüberlauf und Leerraum.

1. text-overflow

text-overflow ist ein neues Attribut von CSS3, mit dem festgelegt wird, wie verfahren werden soll, wenn Text den Container überläuft. Dieses Attribut hat die folgenden Werte:

• clip: Der Text wird direkt nach dem Überlaufen des Containers abgeschnitten.
• Auslassungspunkte: Der Text wird nach dem Überlaufen des Containers in Form von Auslassungspunkten angezeigt.
• Zeichenfolge: Verwenden Sie die angegebene Zeichenfolge, um die Standardauslassungspunkte zu ersetzen, wenn der Text den Container überläuft.

Bei Verwendung von text-overflow müssen Sie im Allgemeinen overflow:hidden und white-space:nowrap festlegen, um den anzuzeigenden Inhalt auf eine Zeile zu beschränken Leerzeichen-Attribut Wird verwendet, um festzulegen, wie mit Leerzeichen innerhalb von Elementen umgegangen wird (z. B. Leerzeichen, Wagenrückläufe usw.). Dieses Attribut hat die folgenden Werte:

2. normal: Standardwert, wenn in einem Element mehrere aufeinanderfolgende Leerzeichen vorhanden sind, wird nur ein Leerzeichen angezeigt.

nowrap: Textumbruch nicht zulassen, Textanzeige in derselben Zeile erzwingen.

pre: Behalten Sie Leerzeichen bei und der Text wird genauso angezeigt wie in der Quelldatei.

• Vorumbruch: Leerraum beibehalten und Text umbrechen lassen.
• Vorzeile: Mehrere aufeinanderfolgende Leerzeichen zusammenführen, sodass der Text umbrochen werden kann.
• Wenn Sie das White-Space-Attribut verwenden, um das Auslassen von Überläufen zu erreichen, müssen Sie den Wert von White-Space auf Nowrap und den Wert von Overflow auf Hidden setzen, wie im folgenden Code gezeigt:

• div {
      width: 200px;
      height: 30px;
      background-color: #f3f3f3;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
  }

Es sollte beachtet werden Die Verwendung des White-Space-Attributs wirkt sich auf den gesamten angezeigten Text im Element aus und muss daher in Verbindung mit dem Text-Overflow-Attribut verwendet werden.
• Zusammenfassung

Die Verwendung von Textüberlauf- und Leerraumattributen in CSS kann uns in einigen Sonderfällen dabei helfen, zu viel Text wegzulassen. Wenn Sie es auf tatsächliche Projekte anwenden, nehmen Sie natürlich Anpassungen basierend auf den tatsächlichen Bedingungen vor.

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS den Effekt, dass die Anzeigeauslassungspunkte überschritten werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!