Warum funktioniert mein „text-overflow: ellipsis' nicht?

text-overflow: ellipsis Not Functioning

Bei dem Versuch, eine Spanne mit Auslassungspunkten zu verkleinern, wenn das Browserfenster schmaler gemacht wird, wurde der folgende Code verwendet:

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
}

Dieser Code führt jedoch nicht zum gewünschten Effekt. Zur Fehlerbehebung ist es wichtig, sicherzustellen, dass die folgenden CSS-Eigenschaften vorhanden sind:

• Überlauf: Diese Eigenschaft steuert, wie Inhalte außerhalb ihres Containers fließen sollen.
• Breite (oder max-width): Diese Eigenschaft bestimmt die maximale Breite des span.
• Anzeige: Diese Eigenschaft gibt an, wie die Spanne angezeigt werden soll, normalerweise auf Inline, Block oder Inline-Block eingestellt.
• Leerraum :Diese Eigenschaft bestimmt, wie mit Leerzeichen innerhalb der Spanne umgegangen wird.

Hier ist ein Beispiel für einen korrigierten Code Dazu gehören diese Eigenschaften:

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

Durch die Einbindung dieser CSS-Eigenschaften sollte die Spanne jetzt mit Auslassungspunkten kleiner werden, wenn das Fenster schmaler wird.

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