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

Lesezeit: 7 Minuten

Hinzufugen von HTML Entitaten mithilfe von CSS Inhalten
Nickf

Wie benutzt man die CSS content Eigenschaft hinzuzufügen HTML Wesen?

Mit so etwas wird nur gedruckt   auf dem Bildschirm anstelle des geschützten Leerzeichens:

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

  • In einem anderen Sinne verstößt das Hinzufügen von Inhalten mit CSS gegen die Trennung von Bedenken, CSS ist nur für Stildefinitionen gedacht. Aus Sicht der Barrierefreiheit ist dies vorzuziehen, da das Deaktivieren von CSS das gesamte Markup durcheinander bringt. Es ist jedoch schön, Bilder mit dieser Technik hinzuzufügen.

    – questzen

    10. Oktober 2008 um 8:03 Uhr

  • Es hängt davon ab, ob. In diesem Fall dient es zu Präsentationszwecken. Es würde SoC “verletzen”, ” >” in HTML einzufügen

    – Mathieu

    10. Oktober 2008 um 9:11 Uhr

  • Nur eine Frage, denken Sie, das wäre besser dran als eine geordnete Liste? Ich meine, es ist eine Liste mit einer Bestellung, nicht wahr?

    – Alex

    20. März 2009 um 5:36 Uhr

  • @questzen – Ich denke, es ist vollkommen akzeptabel (und guter Stil), CSS zu verwenden :after um zum Beispiel den Asc/Desc-Sortierungsindikator auf eine sortierte Spalte zu setzen.

    – Josch M.

    29. April 2014 um 1:18 Uhr

  • Mir ist aufgefallen, dass die Leute verrückt nach dem SoC-Prinzip sind. Himmel, was für Inhalte sind für dich ein “>”-Zeichen?! Erbarme dich! In diesem Zusammenhang ist es nur ein Symbol, ein Widget, ein Aufzählungszeichen, wie Sie es nennen. Inhalt ist für mich etwas, das ich gerne durchsuchbar haben möchte.

    – Benutzer776686

    9. Mai 2014 um 10:06 Uhr

Hinzufugen von HTML Entitaten mithilfe von CSS Inhalten
Mathieu

Sie müssen den maskierten Unicode verwenden:

Wie

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

Mehr Infos auf: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

  • Die führenden Nullen sind überflüssig, siehe CSS 2.1: 4.3.7 Zeichenfolgen. '>\a0' genügt.

    – Spitze Ohren

    21. Dezember 2011 um 19:35 Uhr

  • @dlamblin Außerdem, um zu vermeiden, dass Zeichen als Teil der Escape-Sequenz interpretiert werden zuverlässigStandard-Leerraum hinzufügen: '>\a0 bc' wird angezeigt > bc.

    – Spitze Ohren

    21. Dezember 2011 um 19:41 Uhr


  • Mein Werkzeug 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 mehrdeutig sind.

    – ndp

    21. Februar 2013 um 19:47 Uhr

  • @mathieu Kannst du stattdessen “Inhalt” verwenden, um ein Bild anzuhängen? Ich frage mich nur

    – Weia-Design

    11. Juli 2013 um 14:27 Uhr

  • @Adam, nein, wenn Sie ein Bild anhängen möchten, verwenden Sie “background-image” und display:inline-block; und Breite: 123px; Höhe: 123px; (genaue Breite/Höhe verwenden)

    – Nathan JB

    10. Oktober 2013 um 4:42 Uhr

Hinzufugen von HTML Entitaten mithilfe von CSS Inhalten
Spitze Ohren

CSS ist nicht HTML.   ist ein Name Charakter Referenzen im HTML-Format; entspricht der dezimalen numerischen Zeichenreferenz  . 160 ist die Dezimalzahl Codepunkt des NO-BREAK SPACE Charakter ein Unicode (oder UCS-2; siehe die HTML 4.01-Spezifikation). Die hexadezimale Darstellung dieses Codepunkts ist U+00A0 (160 = 10 × 161 + 0 × 160). Das finden Sie im Unicode Codetabellen und Charakterdatenbank.

In CSS müssen Sie für solche Zeichen eine Unicode-Escape-Sequenz verwenden, die auf dem Hexadezimalwert des Codepoints eines Zeichens basiert. Sie müssen also 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, 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 nach der Escape-Sequenz ein Leerzeichen (z. B. Leerzeichen) hinzu:

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

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

Der begrenzende Leerraum wird ignoriert und angezeigt  foowobei das angezeigte Leerzeichen hier a wäre NO-BREAK SPACE Charakter.

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

  • es ist einfacher zu tippenweil führende Nullen nicht notwendig sind und Ziffern nicht gezählt werden müssen;
  • es ist einfacher zu lesenweil zwischen der Escape-Sequenz und dem folgenden Text Leerzeichen sind und Ziffern nicht gezählt werden müssen;
  • es benötigt weniger Platzweil führende Nullen nicht notwendig sind;
  • es ist aufwärtskompatibelda Unicode, der Codepunkte jenseits von U+10FFFF unterstützt, in Zukunft eine Änderung der CSS-Spezifikation erfordern würde.

Um also ein Leerzeichen nach einem Escape-Zeichen anzuzeigen, verwenden Sie 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 Groß-/Kleinschreibung“ für Details.

  • +1 für den Trick “ein Leerzeichen nach einem entkommenen Zeichen anzuzeigen”, aber ich muss erwähnen, dass das Hinzufügen eines nbsp und dann eines Leerzeichens den Zweck des nbsp zunichte macht;)

    – TWiStErRob

    28. Dezember 2017 um 12:44 Uhr

  • @TWiStErRob Nein, eine Kombination aus einem geschützten Leerzeichen gefolgt von einem umbrechenden Leerzeichen (oder umgekehrt) zeigt eine Lücke von etwa der Breite von an zwei Leerzeichen, während zwei oder mehr wörtlich Leerzeichen zeigen nur eine Lücke mit der Breite von an ein Leerzeichen, da der Parser der Layout-Engine aufeinanderfolgende umbrechende Leerzeichen (einschließlich Zeilenumbruch) in ein Leerzeichen reduziert, es sei denn, das white-space CSS-Eigenschaft erklärt etwas anderes.

    – Spitze Ohren

    23. Januar 2018 um 5:48 Uhr

  • ja, ich weiß über das Zusammenbrechen Bescheid, aber der Sinn von nbsp ist, dass es nicht unterbrechend ist, Wortzeichen sind standardmäßig auch nicht unterbrechend, also macht das Hinzufügen eines unterbrechenden Leerzeichens neben einem nicht unterbrechenden Leerzeichen keinen Sinn, das Endergebnis wird sein brechen. Ich spreche für white-space: normal.

    – TWiStErRob

    23. Januar 2018 um 10:07 Uhr


  • @TWiStErRob Bitte lesen Sie meine Antwort sorgfältiger. Es ist ein Beispiel Zur Ausstellung[ing] ein Leerzeichen nach einem maskierten Zeichen“. Der ursprüngliche Code hatte a NO-BREAK SPACE Zeichen, also habe ich die Escape-Sequenz dafür verwendet. Sie können jede andere Escape-Sequenz wählen; bei Bedarf können Sie deklarieren white-space: nowrapzu.

    – Spitze Ohren

    25. Januar 2018 um 3:01 Uhr


1646251330 352 Hinzufugen von HTML Entitaten mithilfe von CSS Inhalten
dlamblin

Aktualisieren: PointedEars erwähnt, dass das richtige für steht   in allen CSS-Situationen wäre
'\a0 ' Dies impliziert, dass das Leerzeichen ein Abschlusszeichen für die Hex-Zeichenfolge ist und von der Escape-Sequenz absorbiert wird. Darauf wies er weiter hin maßgebliche 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 den maskierten Unicode zu verwenden. Trotz allem, was man dir gesagt hat \00a0 ist 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 */

Konkret verwenden \0000a0 als  . Wenn Sie es versuchen, wie von Mathieu und Millikin vorgeschlagen:

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

Es nimmt das B in die Hex-Escape-Zeichen. Das gleiche passiert mit 0-9a-fA-F.

  • Sie müssen nur ein Leerzeichen nach der Escape-Sequenz einfügen, wie angegeben: '\a0 Break'. '\0000a0Break' ist nicht zuverlässig.

    – Spitze Ohren

    21. Dezember 2011 um 19:39 Uhr


  • @PointedEars Interessant, also ist dieses Leerzeichen ein Terminator und wird nicht in die Zeichenfolge aufgenommen?

    – dlamblin

    3. Januar 2012 um 5:53 Uhr

  • Sehen CSS 2.1, Abschnitt „4.1.3 Zeichen und Groß-/Kleinschreibung“. Was auch zeigt, dass Ihr Ansatz gemäß CSS 2.1 zuverlässig sein sollte. Aber ich finde den Whitespace-Ansatz sauberer (aufwärtskompatibel) und hat einen geringeren Platzbedarf.

    – Spitze Ohren

    3. Januar 2012 um 13:29 Uhr

1646251331 343 Hinzufugen von HTML Entitaten mithilfe von CSS Inhalten
Netzkobold

In CSS müssen Sie anstelle von HTML-Entities eine Unicode-Escape-Sequenz verwenden. Diese basiert auf dem hexadezimalen Wert eines Zeichens.

Ich habe festgestellt, dass der einfachste Weg, Symbole in ihr hexadezimales Äquivalent umzuwandeln, beispielsweise von ▾ (▾) zu \25BE ist der Microsoft-Rechner =)

Jawohl. Programmiermodus aktivieren, Dezimalsystem einschalten, eingeben 9662dann wechseln Sie zu Hex und Sie erhalten 25BE. Fügen Sie dann einfach einen Backslash hinzu \ zu Beginn.

1646251332 641 Hinzufugen von HTML Entitaten mithilfe von CSS Inhalten
John Millikin

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

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

1646251332 693 Hinzufugen von HTML Entitaten mithilfe von CSS Inhalten
Alexander van Ostenrijk

Es gibt eine Möglichkeit, eine einzufügen nbsp – CharMap öffnen und kopieren Charakter 160. In diesem Fall würde ich es jedoch wahrscheinlich wie folgt mit Polsterung ausräumen:

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

Möglicherweise müssen Sie die Brotkrumen einstellen display:inline-block oder doch.

1646251332 693 Hinzufugen von HTML Entitaten mithilfe von CSS Inhalten
Alexander van Ostenrijk

Zum Beispiel :

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 🙂

  • Ich habe Inhalt verwendet:’\10095′; . Aber die Ausgabe wird nicht angezeigt. Anstelle des Symbols wird ein Rechteck angezeigt.

    – kapil

    4. Dezember 2017 um 6:28 Uhr

915630cookie-checkHinzufügen von HTML-Entitäten mithilfe von CSS-Inhalten

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy