CSS-Breite eines <span> -Tags

Ich verwende <span>Tags in meinen Modultiteln, z

<span>Categories</span>.

Ich gebe die Hintergrundfarbe / das Hintergrundbild, die Breite und Höhe des Bereichs in CSS an.

Die Breite des Bereichs hängt jedoch von seinem Inhalt / Text ab.

Wenn ich also <span></span>nur ein Hintergrundbild / eine Hintergrundfarbe in CSS habe, wird nichts angezeigt.

Natürlich möchte ich, dass etwas erscheint.

Wie kann ich das beheben?

Sie können die display-Eigenschaft explizit auf "block" setzen, damit sie sich wie ein Element auf Blockebene verhält. In diesem Fall sollten Sie jedoch wahrscheinlich nur ein div verwenden.

<span style="display:block; background-color:red; width:100px;"></span>

Überspannt standardmäßig den Inline-Stil, dessen Breite Sie nicht angeben können.

display: inline-block;

wäre ein guter Weg, außer IE unterstützt es nicht

Sie können jedoch eine Lösung mit mehreren Browsern hacken

Sie können die Breite eines Elements mit Inline-Anzeige nicht angeben. Sie können etwas wie ein nicht unterbrechendes Leerzeichen () einfügen und dann die Polsterung so einstellen, dass es etwas breiter wird, aber Sie können es nicht direkt steuern.

Sie könnten den Inline-Block für die Anzeige verwenden, dies wird jedoch nicht allgemein unterstützt.

Ein echter Hack wäre es, ein Bild hinein zu legen und dann die Breite festzulegen. So etwas wie ein transparentes 1-Pixel-GIF. Nicht der empfohlene Ansatz.

Ich würde das paddingAttribut verwenden. Auf diese Weise können Sie zu beiden Seiten des Elements eine festgelegte Anzahl von Pixeln hinzufügen, ohne dass das Element seine Spannweite verliert:

• Es wird kein Block
• Es wird schweben, wie Sie es erwarten

Diese Methode wird jedoch nur zum Auffüllen hinzugefügt. Wenn Sie also die Länge des Inhalts ändern (z. B. von Kategorien zu Tags), ändert sich die Größe des Inhalts und auch die Gesamtgröße des Elements. Wenn Sie jedoch wirklich eine starre Größe festlegen möchten, sollten Sie die oben genannten Schritte ausführen und ein div verwenden.

Sehen Sie sich das Box - Modell für mehr Details über das Box - Modell, Inhalt, Polsterung, Marge usw.

Beginnen Sie Ihre Span-Attribute wie in anderen Antworten wie folgt:

display:inline-block;  

Jetzt können Sie mehr Polsterung als Breite verwenden:

padding-left:6%;
padding-right:6%;

Wenn Sie Polster verwenden, wird Ihre Farbe nach beiden Seiten (rechts und links) und nicht nur nach rechts (wie in der Breite) erweitert.

Verwenden Sie das Attribut 'display' wie im Beispiel:

<span style="background: gray; width: 100px; display:block;">hello</span>
<span style="background: gray; width: 200px; display:block;">world</span>

Nachdem Sie die Höhe und Breite festgelegt haben, sagen Sie, wie Sie sich verhalten sollen, wenn der darin enthaltene Text über den Bereich hinausgeht. Fügen Sie also das CSS hinzu

Überlauf: auto;