Warum funktioniert „text-overflow: ellipsis' bei meinem Span-Element nicht?

„text-overflow: ellipsis“ funktioniert nicht

Beim Versuch, „text-overflow: ellipsis“ zum Abschneiden von Text innerhalb eines < ;span> Element, die Auslassungspunkte werden nicht angezeigt, wenn die Fenstergröße reduziert wird.

Lösung

Um die Funktionalität „Textüberlauf: Auslassungspunkte“ zu aktivieren, ist es notwendig, die einzuschließen Folgende CSS-Eigenschaften zusätzlich zu „text-overflow“:

• Überlauf: Stellt sicher, dass der Inhalt des Elements über seinen enthaltenden Bereich hinausgeht und nicht ausgeblendet wird
• Breite (oder maximale Breite): Definiert die maximale Breite des Elements, in dem der Text enthalten sein wird
• Anzeige: Gibt den Anzeigetyp des Elements an (z. B. Block). , inline-block)
• White-space: Steuert, wie Leerzeichen innerhalb des Elements behandelt werden

Beispielcode

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

Erklärung

Im bereitgestellten Beispiel ist das Das Element erhält eine Breite von 100 Pixel und die Überlaufeigenschaft wird auf „versteckt“ gesetzt, um sicherzustellen, dass überschüssiger Inhalt innerhalb der Grenzen des Elements ausgeblendet wird. Die Anzeigeeigenschaft wird auf „block“ gesetzt, um zu erzwingen, dass das Element einen rechteckigen Raumblock einnimmt. Schließlich wird die Leerraumeigenschaft auf „nowrap“ gesetzt, um Zeilenumbrüche im Text zu verhindern.

Wenn diese Eigenschaften angewendet werden, wird die Eigenschaft „text-overflow: ellipsis“ funktionsfähig und schneidet den Text innerhalb des < ab ;span> Element und Hinzufügen von Auslassungspunkten (...), wenn die Fenstergröße so weit reduziert wird, dass der Text die Breite des Elements überschreitet.

Das obige ist der detaillierte Inhalt vonWarum funktioniert „text-overflow: ellipsis' bei meinem Span-Element nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!