Dodawanie encji HTML za pomocą treści CSS

1013

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: ' ';
}
pseudonim
źródło
5
W innym znaczeniu, dodawanie treści za pomocą CSS narusza rozdzielenie obaw, CSS jest przeznaczony tylko do definicji stylów. Z punktu widzenia dostępności lepiej jest tego uniknąć, ponieważ wyłączenie CSS psuje cały znak w górę. Przyjemnie jest jednak dodawać obrazy przy użyciu tej techniki.
questzen 10.10.08
95
To zależy. W tym przypadku jest to prezentacja. „Naruszenie” SoC do umieszczenia „>” w html
mathieu,
2
Tylko pytanie, czy uważasz, że lepiej byłoby, gdyby była to uporządkowana lista? Mam na myśli, że to lista z zamówieniem, prawda?
alex
3
@questzen - Myślę, że używanie CSS :afterdo ustawiania, na przykład, wskaźnika sortowania asc / desc w posortowanej kolumnie jest całkowicie akceptowalne (i dobra forma) .
Josh M.
9
Zauważyłem, że ludzie oszaleli na punkcie zasady SoC. Niebiosa, jaki rodzaj treści jest dla Ciebie znakiem „>” ?! Miej litość! w tym kontekście to tylko ikona, widżet, kula, nazwij to. Dla mnie treść jest czymś, co chciałbym wyszukać.
user776686

Odpowiedzi:

1063

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/

Mathieu
źródło
57
Zera wiodące są zbędne, patrz Ciągi CSS 2.1: 4.3.7 . '>\a0'wystarczy.
PointedEars,
18
@dlamblin Ponadto, aby uniknąć wiarygodnego interpretowania znaków jako części sekwencji ucieczki , należy dodać standardową spację: '>\a0 bc'wyświetla się > bc.
PointedEars,
18
Moje narzędzie amp-what.com/#q=%3E zapewnia tryb „CSS”. Wybierz „css” u dołu strony. Zgodnie z powyższym odniesieniem CSS, muszą być one rozdzielone spacjami, gdy są niejednoznaczne.
ndp
@mathieu Czy zamiast tego możesz użyć „treści”, aby dołączyć obraz? Zastanawiam się
weia projektuje
1
@Adam, nie, jeśli chcesz dołączyć obraz, użyj „obrazu w tle” i wyświetl: blok wstawiany; i szerokość: 123px; wysokość: 123px; (użyj dokładnej szerokości / wysokości)
Nathan JB
177

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 1 + 0 × 16 0 ). 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” .

PointedEars
źródło
+1 za lewę „aby wyświetlić spację po znaku uciekającym”, ale trzeba wspomnieć, że dodanie nbsp, a następnie spacja, pokonuje cel nbsp;)
TWiStErRob
@TWiStErRob Nie, kombinacja niełamliwego znaku spacji, po którym następuje znak łamania spacji (lub odwrotnie) wyświetli odstęp o szerokości dwóch znaków spacji, podczas gdy dwa lub więcej dosłownych znaków spacji wyświetli tylko odstęp szerokość jednego znaku spacji jako parsera silnika układu zwija kolejne rozdzielające białe znaki (w tym znak nowej linii) w jeden znak spacji, chyba że white-spacewłaściwość CSS zadeklaruje inaczej.
PointedEars
tak, wiem o zwijaniu, ale chodzi o to, że nbsp nie łamie się, znaki tekstowe również domyślnie nie łamią się, więc dodawanie spacji obok niełamującej nie ma sensu, efekt końcowy będzie łamanie. Mówię za white-space: normal.
TWiStErRob
@TWiStErRob Proszę uważnie przeczytać moją odpowiedź. Jest to przykład „wyświetlania [ing] spacji po znaku ucieczki”. Oryginalny kod miał NO-BREAK SPACEznak, więc użyłem do niego sekwencji ucieczki. Możesz wybrać dowolną inną sekwencję ucieczki; w razie potrzeby możesz też zadeklarować white-space: nowrap.
PointedEars,
81

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.

dlamblin
źródło
6
Wystarczy umieścić spację po sekwencji ucieczki, jak podano: '\a0 Break'. nie'\0000a0Break' jest wiarygodny.
PointedEars,
@PointedEars Interesujące, więc czy to miejsce jest terminatorem i nie włącza się do ciągu?
dlamblin
2
Zobacz CSS 2.1, sekcja „4.1.3 Znaki i wielkość liter” . Co również pokazuje, że twoje podejście POWINNO być niezawodne zgodnie z CSS 2.1. Uważam jednak, że podejście do białych znaków jest czystsze (kompatybilne w górę) i ma mniejszą powierzchnię.
PointedEars,
47

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.

netgoblin
źródło
4
Chociaż jest to całkowicie przydatne, tak naprawdę nie odpowiada na pytanie, więc byłoby lepiej jako komentarz do pytania.
dlamblin
1
Czarna mała strzałka skierowana w prawo (▸ \25B8 ▸ ▸) ftw. Zobacz także en.wikipedia.org/wiki/Geometric_Shapes, aby uzyskać więcej.
Joel Purra
2Joel Purra, czytaj Wiki więcej czasu. pomyliłeś symbole.
netgoblin,
@netgoblin: jak to? Po prostu lubię czarną strzałkę skierowaną w prawo.
Joel Purra
1
Korzystam z tego graphemica.com, gdzie można dostać dziesiętne, szesnastkowe i tak dalej
Mike
34

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

.breadcrumbs a:before {
    content: '>\00a0';
}
John Millikin
źródło
17

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.

Odważyć się
źródło
4
Zamiast wklejać nbsp, wolałbym używać bytu, aby dla przyszłych opiekunów było jasne, że różni się on od przestrzeni.
nickf
2
z drugiej strony nie robisz bułki tartej tak, jak powinna być, tzn .: symbol> powinien być zgodny z bułką tartą, a nie tylko stylem wizualnym. przynajmniej jeśli chcesz, aby Google zobaczył twoje bułki tartej i umieścił je pod wpisem w wyszukiwarce.
Dementyczny
10

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

Ferhat KOÇER
źródło
użyłem treści: „\ 10095”; . Ale wynik nie jest wyświetlany. zamiast ikony pokazuje prostokąt.
kapil
0

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 „>”.

Brian-Welch
źródło
-2

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ż ⛱

Tarandeep Singh
źródło
Prawidłowa odpowiedź to .ics :: before {content: '\ 9969';}
Marco Scarnatto