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

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: ' ';
}

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/

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 ¹ + 0 × 16 ⁰ ). 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" .

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.

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 .

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

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

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 .

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 :)

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.

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 ⛱