Hinzufügen von HTML-Entitäten CSS Inhalte mit

Question

Wie verwenden Sie die CSS-Eigenschaft content in HTML-Entitäten hinzufügen?

Mit so etwas wie dies gerade druckt   auf dem Bildschirm anstelle des nicht-breaking space:

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

Answer 1

Sie haben die entkam Unicode verwenden:

Wie

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

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

Answer 2

CSS ist nicht HTML.   ist ein benannter Zeichenverweis in HTML; äquivalent der Dezimalzahl numerisches Zeichen Referenz  . 160 ist die Dezimalzahl Codepunkt des NO-BREAK SPACE Charakter in Unicode (oder UCS-2 , siehe HTML 4.01 Spezifikation ). Die hexadezimale Darstellung dieses Codepunkt U + 00A0 (160 = 10 · 16 ¹ + 0 × 16 ⁰ ). Sie werden, dass in dem -Code Charts Unicode finden und Character Database .

In CSS müssen Sie für solche Zeichen eine Unicode-Escape-Sequenz verwenden, die auf den hexadezimalen Wert des Codepunkt eines Zeichens basiert. Sie müssen also schreiben

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

Das funktioniert so lange, wie die Escape-Sequenz in einem String-Wert zuletzt kommt. Wenn die Zeichen folgen, gibt es zwei Möglichkeiten, um Fehlinterpretationen zu vermeiden:

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

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

b) In einer white-space (e g, Leerzeichen) Zeichen nach der Escape-Sequenz:..

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

(Da f eine hexadezimale Ziffer ist, \a0f sonst GURMUKHI LETTER EE bedeutet hier, oder ਏ, wenn Sie eine passende Schriftart haben.)

Die begrenzende white-space werden ignoriert, und dies wird  foo angezeigt, wo der angezeigte Raum hier ein NO-BREAK SPACE Charakter sein würde.

Der white-space-Ansatz ('\a0 foo') hat folgende Vorteile gegenüber dem sechsstelligen Ansatz ('\0000a0foo'):

• ist leichter eingeben, da führende Nullen nicht erforderlich sind, und Ziffern müssen nicht gezählt werden;
• ist leichter zu lesen , weil es weiß-Raum zwischen Escape-Sequenz ist und folgenden Text und Ziffern müssen nicht gezählt werden;
• es erfordert weniger Raum , da führende Nullen nicht erforderlich sind;
• ist nach oben kompatibel , da Unicode-Codepunkte über U + 10FFFF in Zukunft unterstützen würde eine Änderung der CSS-Spezifikation erforderlich.

So ein Leerzeichen nach einem Escape-Zeichen angezeigt wird, verwenden Sie zwei Räume im Stylesheet -

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

- oder macht es deutlich:

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

Siehe CSS 2.1, Abschnitt "4.1.3 Zeichen und Fall" für Details.

Answer 3

Aktualisieren : PointedEars erwähnt, dass der richtige Stand in für   in allen CSS-Situationen würde
'\a0 ' was bedeutet, dass der Raum ein Terminator an den Hex-String ist und wird durch die entkam Sequenz aufgenommen. Er wies ferner diese autoritative Beschreibung , die wie eine gute Lösung klingt auf das Problem, das ich weiter unten beschrieben und festgelegt.

Was Sie tun müssen, ist das entwichene Unicode zu verwenden. Trotz allem, was Sie habe gesagt \00a0 ist kein perfekter Stand-in für   innerhalb CSS; so versuchen:

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

Insbesondere mit \0000a0 als  . Wenn Sie versuchen, wie von mathieu und Millikin:

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

Es nimmt die B in die Hex-Zeichen entkommen. Das gleiche geschieht mit 0-9a-fA-F.

Answer 4

In CSS benötigen Sie eine Unicode-Escape-Sequenz anstelle von HTML-Entities zu verwenden. Dies basiert auf dem hexadezimalen Wert eines Zeichens.

Ich fand, dass der einfachste Weg, Symbol für ihre hexadezimale äquivalent ist, wie von ▾ (▾) zu konvertieren \25BE ist die Microsoft Rechner verwenden =)

Ja. Aktivieren Programmierer-Modus, schalten Sie das Dezimalsystem, geben Sie 9662, dann wechseln Sie in hex und Sie werden 25BE bekommen. Dann fügen Sie einfach einen Backslash \ zum Anfang zurück.

Answer 5

Mit dem Hex-Code für einen non-breaking Raum. So etwas wie folgt aus:

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

Answer 6

Es gibt eine Möglichkeit, eine nbsp einfügen - offen CharMap und kopieren Zeichen 160 . Allerdings habe ich in diesem Fall würde wahrscheinlich Raum, den sie mit einer Polsterung aus, wie folgt aus:

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

Sie müssen möglicherweise die Brotkrumen display:inline-block oder etwas setzen, though.

Answer 7

Beispiel:

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

Beispiel: Wenn Sie Ihren Charakter auswählen möchten, habe ich mit "& # 8620" "& # x21ac" (Wir verwenden HEX Werte)

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

Ergebnis: ↬

Das ist es:)

Answer 8

Ich weiß, dass dies eine ziemlich alte Post, aber wenn Abstand alle nach, warum nicht einfach:

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

Ich habe diese Methode vor verwendet. Es wickelt völlig in Ordnung zu anderen Linien mit „>“ an seiner Seite in meinem Test.

Answer 9

Es gibt zwei Möglichkeiten:

• In HTML:

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

Dies führt in    ⛱

• In Css:

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

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

Dies ergibt sich auch in ⛱