Dodawanie encji HTML za pomocą treści CSS

W jaki sposób używasz właściwości CSS content do dodawania jednostek HTML ?

Używanie czegoś takiego po prostu drukuje  na ekranie zamiast nieprzerwanej przestrzeni:

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

Musisz użyć uciekającego Unicode:

Lubić

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

Więcej informacji na: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

CSS to nie HTML.  jest nazwanym odwołaniem do znaku w HTML; równoważne odwołaniu do dziesiętnego znaku numerycznego  . 160 jest dziesiętny punkt kodowy z NO-BREAK SPACEcharakterem w Unicode (lub UCS-2 ; patrz HTML 4.01 Specification ). Szesnastkowa reprezentacja tego punktu kodowego to U + 00A0 (160 = 10 × 16 ¹ + 0 × 16 ⁰ ). Znajdziesz to w tabelach kodów Unicode i bazie danych znaków .

W CSS musisz używać sekwencji unikowej Unicode dla takich znaków, która jest oparta na wartości szesnastkowej punktu kodowego znaku. Więc musisz pisać

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

Działa to tak długo, jak sekwencja ucieczki jest ostatnią wartością ciągu. Jeśli postacie podążają za nimi, istnieją dwa sposoby uniknięcia błędnej interpretacji:

a) (wspomniane przez innych) Użyj dokładnie sześciu cyfr szesnastkowych dla sekwencji ucieczki:

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

b) Dodaj jeden biały znak (np. spację) po sekwencji ucieczki:

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

(Ponieważ fjest cyfrą szesnastkową, w \a0fprzeciwnym razie oznaczałoby to GURMUKHI LETTER EEtutaj lub ਏ, jeśli masz odpowiednią czcionkę.)

Ograniczająca biała spacja zostanie zignorowana i zostanie wyświetlona  foo, gdzie wyświetlana tu spacja będzie NO-BREAK SPACEznakiem.

Metoda białych '\a0 foo'znaków ( ) ma następujące zalety w stosunku do metody sześciocyfrowej ( '\0000a0foo'):

• jest to łatwiejsze do typu , ponieważ zer nie są konieczne, a cyfry nie muszą być policzone;
• jest łatwiejszy do odczytania , ponieważ między sekwencją zmiany znaczenia a następującym po niej odstępem jest spacja, a cyfry nie muszą być liczone;
• to wymaga mniej miejsca , ponieważ zer nie są konieczne;
• jest kompatybilny w górę , ponieważ kod obsługujący Unicode poza U + 10FFFF w przyszłości wymagałby modyfikacji specyfikacji CSS.

Dlatego, aby wyświetlić spację po znaku ucieczki, użyj dwóch spacji w arkuszu stylów -

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

- lub wyraźnie:

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

Szczegóły w CSS 2.1, sekcja „4.1.3 Znaki i wielkość liter” .

Aktualizacja : PointedEars wspomina, że ​​poprawne zastąpienie  we wszystkich sytuacjach css oznaczałoby,
'\a0 'że spacja jest terminatorem łańcucha szesnastkowego i jest pochłaniana przez sekwencję zmiany znaczenia. 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ć uciekającego Unicode. Pomimo tego, co powiedziano, \00a0nie jest to idealna alternatywa dla  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 \0000a0jako  . Jeśli spróbujesz, jak sugerują Mathieu i Millikin:

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

Przenosi B do znaków ucieczki heksów. To samo dzieje się z 0-9a-fA-F.

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

Odkryłem, że najłatwiejszym sposobem przekonwertowania symbolu na ich szesnastkowy odpowiednik jest na przykład użycie ▾ ( ▾) \25BEdo użycia kalkulatora Microsoft =)

Tak. Włącz tryb programistów, włącz system dziesiętny, wejdź 9662, a następnie przełącz na szesnastkę, a dostaniesz 25BE. Następnie po prostu dodaj odwrotny ukośnik \na początku.

Użyj kodu szesnastkowego, aby nie łamać spacji. Coś takiego:

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

Istnieje sposób, aby wkleić nbsp- otworzyć CharMap i skopiować znak 160 . Jednak w tym przypadku prawdopodobnie rozłożyłbym to za pomocą wypełnienia, tak jak to:

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

Być może jednak będziesz musiał ustawić bułkę tartą display:inline-blocklub coś takiego.

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

Otóż ​​to :)

Wiem, że to dość stary post, ale jeśli zależy Ci na odstępach, dlaczego nie po prostu:

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

Użyłem tej metody wcześniej. W moich testach idealnie przylega do innych wierszy ze znakiem „>”.

Oto dwa sposoby:

• W HTML:

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

Spowoduje to powstanie ⛱

• W Css:

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

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

Powoduje to również ⛱