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

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

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

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

К какому стилю приложен следующий стиль:

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

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

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

Он фактически выводит &nbsp; на экран. Я обошел это с другими странными символами (например, & raquo;), вставив символ непосредственно, но как вы вставляете &nbsp;?

836
10 окт. '08 в 10:19
источник поделиться
9 ответов

Вам нужно использовать экранированный юникод:

Как

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

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

905
10 окт. '08 в 10:27
источник

Связанные вопросы


Похожие вопросы

CSS не является HTML. &nbsp; - это имя ссылка на символ в HTML; эквивалентно значению десятичного числового символа &#160;. 160 является точкой десятичного кода символа NO-BREAK SPACE в Unicode (или UCS-2, см. Спецификация HTML 4.01). Шестнадцатеричное представление этой кодовой точки U + 00A0 (160 = 10 × 16 1 + 0 × 16 0). Вы найдете это в Unicode Диаграммы кода и База символов.

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

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

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

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

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

b) Добавьте после пробельной последовательности один символ пробела (например, пробел):

.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, раздел "4.1.3 Персонажи и футляр" .

132
21 дек. '11 в 23:18
источник

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

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

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

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

content:'No\00a0Break'   /* becomes No&#2571;reak */

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

75
11 сент. '09 в 22:09
источник

Я обнаружил, что самый простой способ конвертировать символы, например от ▾ (&#9662;) в \25BE, - это использовать калькулятор Microsoft =)

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

34
15 дек. '11 в 19:55
источник

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

.breadcrumbs a:before {
    content: '>\00a0';
}
31
10 окт. '08 в 10:24
источник

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

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

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

16
05 дек. '09 в 11:16
источник

Пример:

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

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

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

Результат: ↬

Вот оно:)

7
07 мая '15 в 18:35
источник

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

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

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

0
04 нояб. '17 в 9:36
источник

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

  • В HTML:

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

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

  • В Css:

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

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

Это также приводит к тому, что ⛱

-2
06 окт. '16 в 11:47
источник

Посмотрите другие вопросы по меткам или Задайте вопрос