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

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

Использование чего-то подобного просто печатает   на экране вместо неразрывного пробела:

.breadcrumbs a:before {
    content: ' ';
}
+957
источник поделиться
9 ответов

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

Как

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

Подробнее о: http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

+1020
источник

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

.

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

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

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

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

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

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

.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 Символы и регистр".

+167
источник
другие ответы

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


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

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

Что вам нужно сделать, это использовать escape-код unicode. Несмотря на то, что вам сказали, \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.

+80
источник

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

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

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

+46
источник

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

.breadcrumbs a:before {
    content: '>\00a0';
}
+32
источник

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

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

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

+17
источник

Пример:

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

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

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

Результат: ↬

Вот оно:)

+10
источник

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

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

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

0
источник

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

  • В HTML:

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

Это приведет к  & # 9969;

  • В Css:

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

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

Это также приводит к & # 9969;

-2
источник

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