Wie implementiert man Auslassungspunkte (\"...\") für Textüberlauf in CSS?

So zeigen Sie Ellipsen ("...") für Textüberlauf in CSS an

Beim Umgang mit Text, der den verfügbaren Platz überschreitet, ist häufig ein Bildmaterial erforderlich Indikator, der darauf hinweist, dass mehr Inhalte verfügbar sind. Dies kann erreicht werden, indem Punkte (Auslassungspunkte) im Span-Element mithilfe von CSS angezeigt werden.

Um diese Funktionalität zu aktivieren, befolgen Sie diese Schritte:

1. Stellen Sie sicher, dass der Überlauf ausgeblendet ist:
   Verwenden Sie den Überlauf: versteckt !important; Eigenschaft, um den überlaufenden Text auszublenden.
2. Textüberlauf verwenden:
   Textüberlauf hinzufügen: ellipsis; Eigenschaft, um anzugeben, dass der Text mit Auslassungspunkten (...) gekürzt werden soll, wenn er den verfügbaren Platz überschreitet.
3. Optional: Leerraumsteuerung:
   Um Zeilenumbruch zu verhindern und Stellen Sie sicher, dass die Auslassungspunkte nach dem letzten Zeichen erscheinen, setzen Sie Leerzeichen: nowrap;.

Hier ist ein Codebeispiel:

<code class="css">span {
    display: inline-block;
    width: 180px;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}</code>

<code class="html"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span></code>

Durch die Implementierung dieser CSS-Eigenschaften Sie können Auslassungspunkte in einem Span-Element mit verstecktem Überlauf effektiv anzeigen, um anzuzeigen, dass über den sichtbaren Bereich hinaus mehr Text verfügbar ist.

Das obige ist der detaillierte Inhalt vonWie implementiert man Auslassungspunkte (\"...\") für Textüberlauf in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!