Warum funktioniert meine Textüberlauf-Ellipse nicht?

Textüberlauf-Auslassungspunkte funktionieren nicht

Die Textüberlaufeigenschaft soll den angezeigten Text abschneiden und Auslassungspunkte hinzufügen (...) um anzuzeigen, dass der vollständige Text nicht sichtbar ist. Wenn diese Eigenschaft jedoch nicht wie erwartet funktioniert, ist es wichtig sicherzustellen, dass mehrere wichtige CSS-Eigenschaften vorhanden sind.

Erforderliche CSS-Eigenschaften:

Zur ordnungsgemäßen Aktivierung der text-overflow: Ellipseneffekt, Sie müssen die folgenden CSS-Eigenschaften definiert haben:

• Anzeige: Stellen Sie die Anzeigeeigenschaft auf „Block“ oder „Inline-Block“ ein, um sicherzustellen, dass der Text Platz auf dem Bildschirm einnimmt.
• White-Space: Verwenden Sie White-Space: Nowrap, um den Text zu verhindern vom Umbrechen auf mehrere Zeilen abgehalten.
• Überlauf: Setzen Sie den Überlauf auf „versteckt“, um jeden Teil des Textes auszublenden, der über den des Containers hinausgeht Breite.
• Breite (oder maximale Breite): Geben Sie eine feste Breite (oder maximale Breite) an, um den für den Text verfügbaren Platz einzuschränken.

Demo mit korrektem Code:

Das folgende CSS-Snippet zeigt, wie man das Notwendige richtig anwendet Eigenschaften:

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

Beispiel:

<span>Test test test test test test</span>

Durch die Implementierung dieser Eigenschaften können Sie sicherstellen, dass der angegebene Text abgeschnitten wird und beim Öffnen des Containers Auslassungspunkte angezeigt werden Die Breite ist zu schmal, um den gesamten Text aufzunehmen.

Das obige ist der detaillierte Inhalt vonWarum funktioniert meine Textüberlauf-Ellipse nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!