Heim > Artikel > Web-Frontend > 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.
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:
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:
div { width: 200px; height: 30px; background-color: #f3f3f3; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
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!