Frage HTML-Entitäten mit CSS-Inhalt hinzufügen


Wie benutzt du das CSS? content Eigenschaft zum Hinzufügen von HTML-Entities?

Wenn Sie so etwas verwenden, wird nur gedruckt   auf den Bildschirm anstelle des schussfreien Raumes:

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

877
2017-10-10 07:19


Ursprung


Antworten:


Sie müssen den Escape-Unicode verwenden:

Mögen

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

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


942
2017-10-10 07:27



CSS ist kein HTML.   ist ein Name Charakter Referenzen in HTML; entspricht der dezimalen numerischen Zeichenreferenz  . 160 ist die Dezimalstelle Codepunkt des NO-BREAK SPACE Zeichen in Unicode (oder UCS-2; Siehe die HTML 4.01 Spezifikation). Die hexadezimale Darstellung dieses Codepunkts ist U + 00A0 (160 = 10 × 161 + 0 × 160). Sie werden das im Unicode finden Code Charts und Zeichendatenbank.

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

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

Dies funktioniert, solange die Escape-Sequenz in einem Zeichenfolgenwert als letzte kommt. Wenn Zeichen folgen, gibt es zwei Möglichkeiten, Fehlinterpretationen zu vermeiden:

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

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

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

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

(Schon seit f ist eine hexadezimale Ziffer, \a0f würde sonst bedeuten GURMUKHI LETTER EE hier oder ਏ wenn Sie eine passende Schriftart haben.)

Der begrenzende Leerraum wird ignoriert und dies wird angezeigt  foo, wo der angezeigte Raum hier wäre NO-BREAK SPACE Charakter.

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

  • es ist einfacher zu tippen, weil führende Nullen nicht notwendig sind und Ziffern nicht gezählt werden müssen;
  • es ist leichter zu lesen, weil zwischen der Escape-Sequenz und dem folgenden Text Leerraum liegt und Ziffern nicht gezählt werden müssen;
  • es benötigt weniger Platz, weil führende Nullen nicht notwendig sind;
  • es ist aufwärtskompatibel, da Unicode, das in der Zukunft Code-Punkte jenseits von U + 10FFFF unterstützt, eine Änderung der CSS-Spezifikation erfordern würde.

Verwenden Sie daher, um ein Leerzeichen nach einem Escape-Zeichen anzuzeigen zwei Leerzeichen im Stylesheet -

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

- oder explizit machen:

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

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


144
2017-12-21 20:18



Aktualisieren: PointedEars erwähnt, dass die richtigen stehen   in allen css Situationen wäre
'\a0 ' Dies impliziert, dass der Raum ein Terminator für die Hex-Zeichenfolge ist und von der Escape-Sequenz absorbiert wird. Er wies darauf hin autoritative Beschreibung Das klingt nach einer guten Lösung für das Problem, das ich unten beschrieben und behoben habe.

Was Sie tun müssen, ist die Eskorted Unicode. Trotz allem, was dir gesagt wurde \00a0ist kein perfekter Ersatz für   innerhalb von 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 \0000a0 wie  . Wenn Sie versuchen, wie von Mathieu und Millikin vorgeschlagen:

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

Es nimmt das B in die hexadezimierten Zeichen auf. Das Gleiche passiert mit 0-9a-fA-F.


77
2017-09-11 19:09



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

Ich fand, dass der einfachste Weg, um das Symbol in ihr hexadezimales Äquivalent zu konvertieren, z. B. von ▾ (▾) zu \25BE ist der Microsoft Rechner =)

Ja. Aktivieren Sie den Programmiermodus, schalten Sie das Dezimalsystem ein, geben Sie ein 9662, dann zu hex wechseln und du wirst es bekommen 25BE. Dann füge einfach einen Backslash hinzu \ zu Beginn.


39
2017-12-15 16:55



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

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

31
2017-10-10 07:24



Es gibt eine Möglichkeit, eine einzufügen nbsp - öffne CharMap und kopiere Zeichen 160. In diesem Fall würde ich es jedoch wahrscheinlich mit einem Padding ausstatten:

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

Sie müssen möglicherweise die Breadcrumbs festlegen display:inline-block oder so etwas.


16
2017-12-05 08:16



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 VERHEXEN Werte)

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

Ergebnis: ↬

Das ist es :)


8
2018-05-07 15:35