Dodawanie encji HTML za pomocą zawartości CSS

CSS to nie HTML. {[5] } jest nazwanym znakiem W HTML; równoważnym dziesiętnemu numerycznemu znakowi odniesienia  . 160 jest dziesiętnym punktem kodu znaku NO-BREAK SPACE w Unicode (lub UCS-2; Zobacz HTML 4.01 Specyfikacja). Szesnastkowa reprezentacja tego punktu kodowego to U+00A0 (160 = 10 × 16¹ + 0 × 16⁰). Znajdziesz to na wykresach kodu Unicode i znak Baza danych .

W CSS musisz użyć sekwencji escape Unicode dla takich znaków, która opiera się na szesnastkowej wartości punktu kodu znaku. Więc musisz napisać

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

To działa tak długo, jak Sekwencja escape jest ostatnia w łańcuchu wartości. Jeśli pojawią się znaki, istnieją dwa sposoby na uniknięcie błędnej interpretacji: {]}

A) (wymienione przez innych) użyj dokładnie sześciu cyfr szesnastkowych dla sekwencji wyjścia:

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

B) dodaj jedną białą spację (np. spacja) znak po sekwencji escape:

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

(ponieważ f jest cyfrą szesnastkową, \a0f w przeciwnym razie oznacza GURMUKHI LETTER EE tutaj, lub ਏ, jeśli masz odpowiednią czcionkę.)

Rozdzielająca Biała spacja zostanie zignorowana i zostanie wyświetlona  foo, gdzie wyświetlana spacja będzie znakiem NO-BREAK SPACE.

Podejście white-space ('\a0 foo') ma następujące zalety w stosunku do podejścia sześciocyfrowego('\0000a0foo'):

• it is easier to typ , ponieważ początkowe zera nie są konieczne, a cyfry nie muszą być liczone;
• jest to łatwiejsze do odczytania , ponieważ istnieje biała spacja między sekwencją escape i następującym tekstem, a cyfry nie muszą być zliczane;
• to wymaga mniej miejsca, ponieważ wiodące zera nie są konieczne;
• jest to kompatybilne w górę, ponieważ Unicode obsługujący punkty kodu poza U + 10FFFF w przyszłości wymagałby modyfikacji CSS Specyfikacja.

Tak więc, aby wyświetlić spację po znaku ucieczki, użyj dwóch spacji w arkuszu stylów –

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

– albo wprost:

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

Zobacz CSS 2.1, sekcja "4.1.3 znaki i wielkość liter" Po szczegóły.

Update : PointedEars wspomina, że poprawnym stand in dla   we wszystkich sytuacjach css będzie
'\a0 ' oznacza to, że przestrzeń jest terminatorem ciągu sześciokątnego i jest absorbowana przez sekwencję ucieczki. Następnie zwrócił uwagę na ten autorytatywny opis, który brzmi jak dobre rozwiązanie problemu, który opisałem i naprawiłem poniżej.

Musisz użyć Unikodu. Pomimo tego, co ci powiedziano, {[4] } nie jest idealnym stand-in dla   w CSS; więc spróbuj:

content:'>\a0 ';          /* or */
content:'>\0000a0';       /* because you'll find: */
content:'No\a0 Break';    /* and */
content:'No\0000a0Break'; /* becomes No Break as opposed to below */

W szczególności używając \0000a0 jako  . Jeśli spróbujesz, zgodnie z sugestią mathieu i millikina:

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

Przenosi " B " do postaci hex. To samo dzieje się z 0-9A-fA-F.

W CSS musisz użyć sekwencji escape Unicode zamiast encji HTML. Jest to oparte na wartości szesnastkowej znaku.

Odkryłem, że najprostszym sposobem na przekonwertowanie symbolu na jego szesnastkowy odpowiednik jest, na przykład z ▾ (▾) do \25BE jest użycie kalkulatora Microsoft=)

Użyj kodu szesnastkowego dla niełamliwych spacji. Coś takiego:

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

Istnieje sposób na wklejenie nbsp - Otwórz Charmapę i skopiuj znak 160 . Jednak w tym przypadku prawdopodobnie umieściłbym go z wyściółką, w ten sposób:

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

Na Przykład:

Http://character-code.com/arrows-html-codes.php

Przykład: jeśli chcesz wybrać swoją postać, wybrałem "& # 8620 "" & #x21ac "(używamy wartości HEX)

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

Wynik: ↬

To jest to:)

Wiem, że to dość stary post, ale jeśli to wszystko po, to dlaczego nie po prostu:

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

Oto dwa sposoby:

• W HTML:

  <div class="ics">&#9969;</div>

Spowoduje to

• W Css:

  .ics::before {content: "\9969;"}

Z kodem HTML <div class="ics"></div>

To również skutkuje