Hinzufügen von HTML-Entitäten mithilfe von CSS-Inhalten

1013

Wie verwenden Sie die CSS- content Eigenschaft, um HTML- Entitäten hinzuzufügen ?

Wenn Sie so etwas verwenden, wird nur  auf dem Bildschirm gedruckt , anstatt den nicht unterbrechenden Bereich:

.breadcrumbs a:before {
    content: ' ';
}
nickf
quelle
5
In einem anderen Sinne verstößt das Hinzufügen von Inhalten mithilfe von CSS gegen die Trennung von Bedenken. CSS ist nur für Stildefinitionen gedacht. Es ist vorzuziehen, dies aus Sicht der Barrierefreiheit zu vermeiden, da das Deaktivieren von CSS die gesamte Markierung verschraubt. Es ist jedoch schön, Bilder mit dieser Technik hinzuzufügen.
Questzen
95
Es hängt davon ab, ob. In diesem Fall dient es zu Präsentationszwecken. Es würde SoC "verletzen", ">" in das HTML
Mathieu
2
Nur eine Frage, denkst du, das wäre besser als eine geordnete Liste? Ich meine, es ist eine Liste mit einer Bestellung, nicht wahr?
Alex
3
@questzen - Ich denke, es ist durchaus akzeptabel (und in guter Form), CSS :afterzu verwenden, um beispielsweise den Sortierindikator asc / desc für eine sortierte Spalte festzulegen.
Josh M.
9
Mir ist aufgefallen, dass die Leute verrückt nach dem SoC-Prinzip geworden sind. Himmel, was für ein Inhalt ist ein ">" Zeichen für dich?! Erbarme dich! In diesem Zusammenhang ist es nur ein Symbol, ein Widget, eine Kugel, wie Sie es nennen. Für mich ist Inhalt etwas, das ich durchsuchbar sein möchte.
user776686

Antworten:

1063

Sie müssen den maskierten Unicode verwenden:

Mögen

.breadcrumbs a:before {
    content: '\0000a0';
}

Weitere Informationen unter: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

Mathieu
quelle
57
Die führenden Nullen sind überflüssig, siehe CSS 2.1: 4.3.7 Strings . '>\a0'genügt.
PointedEars
18
@dlamblin Um zu vermeiden, dass Zeichen zuverlässig als Teil der Escape-Sequenz interpretiert werden , wird ein Standard-Leerraum hinzugefügt: '>\a0 bc'wird angezeigt > bc.
PointedEars
18
Mein Tool amp-what.com/#q=%3E bietet einen "CSS" -Modus. Wählen Sie unten auf der Seite "css". Gemäß der obigen CSS-Referenz müssen diese durch Leerzeichen getrennt werden, wenn sie nicht eindeutig sind.
ndp
@mathieu Kannst du stattdessen 'Inhalt' verwenden, um ein Bild anzuhängen? Ich frage mich nur
weia Design
1
@Adam, nein, wenn Sie ein Bild anhängen möchten, verwenden Sie "Hintergrundbild" und zeigen Sie Folgendes an: Inline-Block; und Breite: 123px; Höhe: 123px; (Verwenden Sie genaue Breite / Höhe)
Nathan JB
177

CSS ist kein HTML.  ist eine benannte Zeichenreferenz in HTML; entspricht der dezimalen numerischen Zeichenreferenz  . 160 ist der dezimale Codepunkt des NO-BREAK SPACEZeichens in Unicode (oder UCS-2 , siehe HTML 4.01 Specification ). Die hexadezimale Darstellung dieses Codepunkts ist U + 00A0 (160 = 10 × 16 1 + 0 × 16 0 ). Sie werden , dass in dem Unicode finden - Code Charts und Character Database .

In CSS müssen Sie für solche Zeichen eine Unicode-Escape-Sequenz verwenden, die auf dem Hexadezimalwert des Codepunkts eines Zeichens basiert. Also musst du schreiben

.breadcrumbs a:before {
  content: '\a0';
}

Dies funktioniert, solange die Escape-Sequenz in einem Zeichenfolgenwert an letzter Stelle steht. Wenn Zeichen folgen, gibt es zwei Möglichkeiten, um Fehlinterpretationen zu vermeiden:

a) (von anderen erwähnt) Verwenden Sie genau sechs hexadezimale Ziffern für die Escape-Sequenz:

.breadcrumbs a:before {
  content: '\0000a0foo';
}

b) Fügen Sie nach der Escape-Sequenz ein Leerzeichen (z. B. Leerzeichen) hinzu:

.breadcrumbs a:before {
  content: '\a0 foo';
}

(Da fes sich um eine hexadezimale Ziffer handelt, \a0fwürde dies GURMUKHI LETTER EEhier andernfalls bedeuten , oder ਏ, wenn Sie eine geeignete Schriftart haben.)

Der abgrenzende Leerraum wird ignoriert und angezeigt  foo, wobei der hier angezeigte Bereich ein NO-BREAK SPACEZeichen ist.

Der White-Space-Ansatz ( '\a0 foo') bietet gegenüber dem sechsstelligen Ansatz ( '\0000a0foo') folgende Vorteile :

  • Die Eingabe ist einfacher , da führende Nullen nicht erforderlich sind und die Ziffern nicht gezählt werden müssen.
  • Es ist einfacher zu lesen , da zwischen der Escape-Sequenz und dem folgenden Text ein Leerraum ist und die Ziffern nicht gezählt werden müssen.
  • es benötigt weniger Platz , da führende Nullen nicht notwendig sind;
  • Es ist aufwärtskompatibel , da Unicode-unterstützende Codepunkte in Zukunft über U + 10FFFF hinaus eine Änderung der CSS-Spezifikation erfordern würden.

Um ein Leerzeichen nach einem maskierten Zeichen anzuzeigen, verwenden Sie zwei Leerzeichen im Stylesheet.

.breadcrumbs a:before {
  content: '\a0  foo';
}

- oder machen Sie es explizit:

.breadcrumbs a:before {
  content: '\a0\20 foo';
}

Weitere Informationen finden Sie in CSS 2.1, Abschnitt "4.1.3 Zeichen und Groß- / Kleinschreibung" .

Spitze Ohren
quelle
+1 für den Trick "ein Leerzeichen nach einem entkommenen Zeichen anzeigen", muss aber erwähnen, dass das Hinzufügen eines nbsp und dann eines Leerzeichens den Zweck des nbsp
zunichte macht
@TWiStErRob Nein, eine Kombination aus einem nicht unterbrechenden Leerzeichen gefolgt von einem unterbrechenden Leerzeichen (oder umgekehrt) zeigt eine Lücke über die Breite von zwei Leerzeichen an, während zwei oder mehr wörtliche Leerzeichen nur eine Lücke von anzeigen Die Breite eines Leerzeichens als Parser der Layout-Engine reduziert aufeinanderfolgende Leerzeichen (einschließlich Zeilenumbrüche) in ein Leerzeichen, sofern die white-spaceCSS-Eigenschaft nichts anderes deklariert.
PointedEars
Ja, ich weiß, wie man zusammenbricht, aber der Punkt von nbsp ist, dass es nicht unterbricht. Wortzeichen sind standardmäßig auch nicht unterbrechend. Das Hinzufügen eines Leerzeichens neben einem nicht unterbrechenden macht also keinen Sinn. Das Endergebnis wird sein brechen. Ich spreche für white-space: normal.
TWiStErRob
@TWiStErRob Bitte lesen Sie meine Antwort genauer durch. Dies ist ein Beispiel für das Anzeigen eines Leerzeichens nach einem Escapezeichen. Der ursprüngliche Code hatte ein NO-BREAK SPACEZeichen, daher habe ich die Escape-Sequenz dafür verwendet. Sie können eine andere Escape-Sequenz auswählen. Bei Bedarf können Sie auch deklarieren white-space: nowrap.
PointedEars
81

Update : PointedEars erwähnt, dass der richtige Ersatz  in allen CSS-Situationen bedeuten würde
'\a0 ', dass das Leerzeichen ein Terminator für die Hex-Zeichenfolge ist und von der maskierten Sequenz absorbiert wird. Er wies ferner auf diese maßgebliche Beschreibung hin, die nach einer guten Lösung für das Problem klingt, das ich unten beschrieben und behoben habe.

Sie müssen lediglich den maskierten Unicode verwenden. Trotz allem, was Ihnen gesagt wurde, \00a0ist dies kein perfekter Ersatz für  CSS. also versuche:

content:'>\a0 ';          /* or */
content:'>\0000a0';       /* because you'll find: */
content:'No\a0 Break';    /* and */
content:'No\0000a0Break'; /* becomes No Break as opposed to below */

Speziell mit \0000a0als  . Wenn Sie es versuchen, wie von Mathieu und Millikin vorgeschlagen:

content:'No\00a0Break'   /* becomes No਋reak */

Es nimmt das B in die hexadezimalen Zeichen. Gleiches gilt für 0-9a-fA-F.

Dlamblin
quelle
6
Sie müssen nur ein Leerzeichen nach der Escape-Sequenz einfügen, wie angegeben : '\a0 Break'. '\0000a0Break'ist nicht zuverlässig.
PointedEars
@PointedEars Interessant, also ist dieser Raum ein Terminator und wird nicht in die Zeichenfolge aufgenommen?
Dlamblin
2
Siehe CSS 2.1, Abschnitt "4.1.3 Zeichen und Groß- / Kleinschreibung" . Dies zeigt auch, dass Ihr Ansatz gemäß CSS 2.1 zuverlässig sein sollte. Aber ich finde den Whitespace-Ansatz sauberer (aufwärtskompatibel) und habe einen geringeren Platzbedarf.
PointedEars
47

In CSS müssen Sie anstelle von HTML-Entitäten eine Unicode-Escape-Sequenz verwenden. Dies basiert auf dem Hexadezimalwert eines Zeichens.

Ich fand heraus, dass der einfachste Weg, ein Symbol in sein hexadezimales Äquivalent umzuwandeln, beispielsweise von ▾ ( ▾) bis \25BEdie Verwendung des Microsoft-Rechners =) ist.

Ja. Aktivieren Sie den Programmierermodus, schalten Sie das Dezimalsystem ein, geben Sie es ein 9662und wechseln Sie dann zu hex 25BE. Fügen Sie \dann am Anfang einfach einen Backslash hinzu .

Netgoblin
quelle
4
Obwohl es absolut nützlich ist, beantwortet es die Frage nicht wirklich, daher wäre dies besser als Kommentar zur Frage.
Dlamblin
1
Schwarzer nach rechts zeigender kleiner Pfeil (▸ \25B8 ▸ ▸) ftw. Weitere Informationen finden Sie auch unter en.wikipedia.org/wiki/Geometric_Shapes .
Joel Purra
2Joel Purra, lies das Wiki länger. Sie haben die Symbole falsch verstanden.
Netgoblin
@netgoblin: wie so? Ich mag zufällig einen schwarzen, nach rechts zeigenden kleinen Pfeil.
Joel Purra
1
Ich benutze diese graphemica.com, wo Sie die Dezimal-, Hexadezimal- und so weiter erhalten können
Mike
34

Verwenden Sie den Hex-Code für ein nicht unterbrechendes Leerzeichen. Etwas wie das:

.breadcrumbs a:before {
    content: '>\00a0';
}
John Millikin
quelle
17

Es gibt eine Möglichkeit, eine nbspgeöffnete CharMap einzufügen und das Zeichen 160 zu kopieren . In diesem Fall würde ich es jedoch wahrscheinlich mit einer Polsterung wie folgt ausräumen:

.breadcrumbs a:before { content: '>'; padding-right: .5em; }

Möglicherweise müssen Sie jedoch die Semmelbrösel display:inline-blockoder etwas anderes einstellen .

Wagen
quelle
4
Anstatt den nbsp einzufügen, würde ich mich an die Verwendung einer Entität halten, damit zukünftigen Betreuern klar ist, dass sie sich von einem Leerzeichen unterscheidet.
Nickf
2
Auf der anderen Seite machen Sie keine Semmelbrösel, wie sie sein sollen, dh: Das Symbol> sollte mit dem Semmelbrösel übereinstimmen und nicht nur ein visueller Stil sein. Zumindest, wenn Google Ihre Brotkrumen sehen und unter Ihrem Eintrag in der Suchmaschine auflisten soll.
Dementic
10

Beispielsweise :

http://character-code.com/arrows-html-codes.php

Beispiel: Wenn Sie Ihren Charakter auswählen möchten, habe ich "& # 8620" "& # x21ac" ausgewählt (wir verwenden HEX- Werte).

.breadcrumbs a:before {
    content: '\0021ac';
}

Ergebnis: ↬

Das ist es :)

Ferhat KOÇER
quelle
Ich habe Inhalt verwendet: '\ 10095'; . Die Ausgabe wird jedoch nicht angezeigt. Anstelle des Symbols wird ein Rechteck angezeigt.
Kapil
0

Ich weiß, dass dies ein ziemlich alter Beitrag ist, aber wenn Sie nur Abstand haben, warum nicht einfach:

.breadcrumbs a::before {
    content: '>';
    margin-left: 8px;
    margin-right: 8px;
}

Ich habe diese Methode schon einmal benutzt. Bei meinen Tests wird es mit ">" an der Seite perfekt in andere Zeilen eingefügt.

Brian-Welch
quelle
-2

Hier sind zwei Möglichkeiten:

  • In HTML:

    <div class="ics">&#9969;</div>

Dies führt zu ⛱

  • In CSS:

    .ics::before {content: "\9969;"}

mit HTML-Code <div class="ics"></div>

Dies führt auch zu ⛱

Tarandeep Singh
quelle
Die richtige Antwort lautet .ics :: before {content: '\ 9969';}
Marco Scarnatto