Добавление HTML-объектов с использованием CSS-контента

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

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

.breadcrumbs a:before {
    content: ' ';
}
890
css css-content html html-entities

9 ответов

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

Как 

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

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

952

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

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

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

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

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

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

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

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

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

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

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

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

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

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

- или сделайте это явным:

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

посмотреть в CSS 2.1, раздел "4.1.3 символы и регистр" для подробности.

147

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

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

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

используя 00a0 as  . Если вы попытаетесь, как предлагают Матье и Милликен:

content:'Noa0Break'   /* becomes No਋reak */

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

78

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

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

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

39

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

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

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

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

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

16

Например :

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

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

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

результат : ↬

вот и все :)

8

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

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

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

0

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

  • в HTML:

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

в результате

  • В Css:

    .ics::before {content: "69;"}

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

в результате

-2