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: ' ';
}
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: ' ';
}
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
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 foo
wobei 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'
):
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: nowrap
zu.
– Spitze Ohren
25. Januar 2018 um 3:01 Uhr
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
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 9662
dann wechseln Sie zu Hex und Sie erhalten 25BE
. Fügen Sie dann einfach einen Backslash hinzu \
zu Beginn.
John Millikin
Verwenden Sie den Hex-Code für ein geschütztes Leerzeichen. Etwas wie das:
.breadcrumbs a:before {
content: '>\00a0';
}
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.
Alexander van Ostenrijk
Zum Beispiel :
http://character-code.com/arrows-html-codes.php
Beispiel: Wenn Sie Ihren Charakter auswählen möchten, habe ich “↬” “↬” 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
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