it-swarm.com.de

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

Wie können Sie die Eigenschaft CSS content zum Hinzufügen von HTML-Entitäten verwenden?

Wenn Sie so etwas verwenden, wird   anstelle des nicht unterbrechenden Leerzeichens auf dem Bildschirm ausgegeben:

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

Sie müssen den mit Escapezeichen versehenen 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/

1009
mathieu

CSS ist kein HTML.   ist ein benanntes Zeichenreferenz in HTML; Entspricht der dezimalen numerischen Zeichenreferenz  . 160 ist der dezimale Codepunkt des Zeichens NO-BREAK SPACE in nicode (oder CS-2 ; HTML 4.01 Spezifikation ). Die hexadezimale Darstellung dieses Codepunkts ist U + 00A0 (160 = 10 × 161 + 0 × 16). Sie finden das in den Unicode 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 so lange, wie die Escape-Sequenz in einem String-Wert an letzter Stelle steht. Wenn Zeichen folgen, gibt es zwei Möglichkeiten, um eine Fehlinterpretation 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. ein Leerzeichen) ein:

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

(Da f eine hexadezimale Ziffer ist, würde \a0f andernfalls GURMUKHI LETTER EE bedeuten, oder ਏ, wenn Sie eine geeignete Schriftart haben.)

Der begrenzende Leerraum wird ignoriert und dies wird angezeigt  foo, wobei der angezeigte Leerraum hier ein NO-BREAK SPACE -Zeichen wäre.

Der Leerraumansatz ('\a0 foo') bietet die folgenden Vorteile gegenüber dem sechsstelligen Ansatz ('\0000a0foo'):

  • es ist einfacher, einzugeben, da führende Nullen nicht erforderlich sind und Ziffern nicht gezählt werden müssen.
  • es ist einfacher zu lesen , da zwischen der Escape-Sequenz und dem folgenden Text ein Leerraum besteht 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 über U + 10FFFF in Zukunft 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 explizit machen:

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

Siehe CSS 2.1, Abschnitt "4.1.3 Zeichen und Groß-/Kleinschreibung" für Details.

163
PointedEars

Update : PointedEars erwähnt, dass das korrekte Eintreten für   in allen CSS-Situationen wäre
'\a0 ' bedeutet, dass das Leerzeichen ein Terminator für die Hex-Zeichenfolge ist und von der maskierten Sequenz absorbiert wird. Er wies weiter auf dieses maßgebliche Beschreibung hin, das sich nach einer guten Lösung für das Problem anhört, das ich nachfolgend beschrieben und behoben habe.

Sie müssen lediglich den mit Escapezeichen versehenen Unicode verwenden. Trotz allem, was Ihnen gesagt wurde, ist \00a0 kein perfekter Stellvertreter für   in 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 */

Verwenden Sie speziell \0000a0 als  . Wenn Sie versuchen, wie von Mathieu und Millikin vorgeschlagen:

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

Das B wird in die hexadezimalen Zeichen eingefügt. Gleiches gilt für 0-9a-fA-F.

79
dlamblin

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 ein hexadezimales Äquivalent umzuwandeln, beispielsweise von calculator (▾) zu \25BE, darin besteht, den Microsoft-Taschenrechner zu verwenden =)

Ja. Aktivieren Sie den Programmierermodus, schalten Sie das Dezimalsystem ein, geben Sie 9662 ein und wechseln Sie dann zu hex und Sie erhalten 25BE. Dann fügen Sie einfach einen Backslash \ an den Anfang.

44
netgoblin

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

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

Es gibt eine Möglichkeit, ein nbsp einzufügen - öffne CharMap und kopiere Zeichen 16. 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 die Semmelbrösel display:inline-block oder etwas anderes einstellen.

16
Dare

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

9
Ferhat KOÇER

Ich weiß, dass dies ein ziemlich alter Beitrag ist, aber wenn der Abstand alles ist, warum nicht einfach:

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

Ich habe diese Methode schon einmal verwendet. Es wird in meinem Test perfekt in andere Zeilen mit ">" umbrochen.

0
brian-welch