Добавление объектов HTML с использованием содержимого CSS

Question

Как вы используете свойство CSS content для добавления объектов html?

У меня есть ряд ссылок, которые я вношу в список стилей пачки, добавив стрелку перед каждым.

<div class="breadcrumbs"> 
    <a>One</a> 
    <a>Two</a> 
    <a>Three</a> 
</div> 

которая имеет следующий стиль, примененный к нему:

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

Проблема заключается в том, что, когда список крошка получает длинный и переносится на следующую строку, стрелка влево на предыдущей строке. Очевидное решение состоит в изменении места в неразрывный пробел, но это не работает:

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

Это фактически выводит   на экран. Я обошел это с другими странными символами (например, »), вставив символ напрямую, но как вы вставляете  ?

Answer 1

Вы должны использовать сбежавший Юникод:

Like

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

Дополнительной информации о: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

Answer 2

Используйте шестнадцатеричный код для неразрывного пространства. Что-то вроде этого:

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

Answer 3

Update: PointedEars упоминает, что правильный стенд in для   во всех ситуациях css будет
'\a0 ', подразумевая, что пространство является терминатором шестнадцатеричной строки и поглощается экранированной последовательностью. Далее он указал на этот authoritative description, который звучит как хорошее решение проблемы, которую я описал и зафиксировал ниже.

Что вам нужно сделать, это использовать экранированный юникод. Несмотря на то, что вам сказали, \00a0 не является идеальной версией для   в CSS; так попробовать:

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

В частности, используя в качестве \0000a0 . Если попытаться, как это было предложено Матье и Милликин:

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

Он принимает B в шестнадцатеричный экранированные символы. То же самое происходит с 0-9a-fA-F.

Answer 4

Существует способ вставить nbsp - открыть CharMap и скопировать персонаж 160. Однако, в этом случае я бы, вероятно, пространство его с прокладкой, например:

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

Вам может понадобиться установить сухари display:inline-block или что-то, хотя.

Answer 5

В CSS вам нужно использовать escape-последовательность Unicode вместо HTML-сущностей. Это основано на шестнадцатеричном значении символа.

Я обнаружил, что самый простой способ для преобразования символов в их шестнадцатеричный эквивалент, например, от ▾ (▾) в \25BE заключается в использовании калькулятора Microsoft =)

Да. Включите режим программистов, включите десятичную систему, введите 9662, затем переключитесь на шестнадцатеричный, и вы получите 25BE. Затем просто добавьте обратную косую черту \ в начало.

Answer 6

CSS не является HTML.   - это имя character reference в формате HTML; эквивалентно десятичной цифровой символьной ссылке  . 160 - десятичная цифра кодовая точка символа NO-BREAK SPACE в Unicode (или UCS-2; см. HTML 4.01 Specification). Шестнадцатеричное представление этой кодовой точки U + 00A0 (160 = 10 × 16 + 0 × 16). Вы найдете это в Юникоде Code Charts и Character Database.

В CSS вам нужно использовать escape-последовательность Unicode для таких символов, которая основана на шестнадцатеричном значении кодовой точки символа. Поэтому вам нужно написать

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

Это работает до тех пор, пока последовательность эвакуации завершается строковым значением. Если символы следуют, есть два пути, чтобы избежать неправильного толкования:

а) (упоминаемый другими) Используйте ровно шесть шестнадцатеричных цифр для управляющей последовательности:

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

б) Добавить одну Пробельные (например, пробел) символ после побега последовательности:

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

(с f является шестнадцатеричной цифрой, \a0f иначе означало бы GURMUKHI LETTER EE здесь, или ਏ, если у вас есть подходящий шрифт)

.

Разметка пробела будет проигнорирована, и это будет отображаться > foo, где отображаемое пространство здесь будет символом NO-BREAK SPACE.

бело-космический подход ('\a0 foo') имеет следующие преимущества по сравнению с шестизначным подхода ('\0000a0foo'):

• это проще набрать, потому что ведущие нули не нужны, а цифры делать не нужно учитывать;
• легче читать, так как между escape-последовательностями и последующим текстом есть пробел между пробелами и цифры не нужно подсчитывать;
• его требует меньше места, поскольку ведущие нули не нужны;
• это с повышением совместимости, поскольку Unicode, поддерживающий кодовые точки за пределами U + 10FFFF, в будущем потребует изменения спецификации CSS.

Таким образом, чтобы отобразить пробел после беглого символа, используйте два пространства в таблице стилей -

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

- или сделать его явным:

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

См CSS 2.1, section "4.1.3 Characters and case" подробности ,

Answer 7

Для примера:

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

Пример: Если вы хотите выбрать своего персонажа, я выбрал "& # 8620" "& # x21ac" (Мы используем HEX значения)

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

Результат: ↬

Tha TS это :)

Answer 8

Вот два способа:

• В HTML:

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

Это приведет к ⛱

• В Css:

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

с HTML кодом <div class="ics"></div>

Это также приводит к ⛱

Answer 9

Я знаю, что это довольно старый пост, но если расстояние это все ваши после, почему не просто:

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

Я использовал этот метод раньше. Он отлично переносится на другие строки с помощью «>» рядом с моим тестом.