Добавление объектов HTML с использованием содержимого CSS
Как вы используете свойство CSScontent для добавления сущностей HTML?
Использование чего-то вроде этого просто выводит на экран вместо неразрывного пробела:
.breadcrumbs a:before {
content: ' ';
}
По-разному. В данном случае это для презентационных целей. Было бы "нарушением" SoC помещать ">" в html
Просто вопрос, как вы думаете, было бы лучше в виде упорядоченного списка? Я имею в виду, это список с порядком, не так ли?
Верно, но ... там еще порядок. Три - это после двух, после одного. Для использования OL потребуется больше разметки и больше стиля.
@questzen - Я думаю, что вполне приемлемо (и неплохо) использовать CSS :after для установки, например, индикатора сортировки asc / desc в отсортированном столбце.
Я заметил, что люди сходят с ума по принципу SoC. Боже, что за контент для вас знак ">" ?! Сжалься! это просто значок в этом контексте, виджет, пуля, вы называете это. Для меня контент - это то, что я хотел бы сделать доступным для поиска.
Полезная ссылка для преобразования ваших значков или символов в значение CSS: evotech.net/articles/testjsentities.html
Я отредактировал вопрос и пару ответов, чтобы упростить вопрос об объектах html, поскольку это был фактический вопрос здесь, и удалил ссылку на странный вариант использования, который сбивал с толку все ответы (добавление того, что выглядело как синтаксис CSS, который был просто больше знака из-за его близости к другим необычным escape-последовательностям CSS)
Ответы 9
Используйте шестнадцатеричный код для неразрывного пробела. Что-то вроде этого:
.breadcrumbs a:before {
content: '>\00a0';
}
Вы должны использовать экранированный юникод:
Нравиться
.breadcrumbs a:before {
content: '\0000a0';
}
Подробнее на: http://www.evotech.net/blog/2007/04/ named-html-entities-in-numeric-order/
Начальные нули излишни, см. CSS 2.1: 4.3.7 Строки. '>\a0' достаточно.
@dlamblin Далее, чтобы символы не интерпретировались как часть escape-последовательности надежно, добавьте стандартный пробел: '>\a0 bc' отображается как > bc.
Мой инструмент amp-what.com/#q=%3E предоставляет режим «CSS». Выберите «css» внизу страницы. Согласно приведенной выше ссылке CSS, они должны быть разделены пробелами, если они неоднозначны.
@mathieu Можете ли вы вместо этого использовать "контент" для добавления изображения? Просто интересуюсь
@ Адам, нет, если вы хотите добавить изображение, используйте "background-image" и display: inline-block; и ширина: 123px; height: 123px; (используйте точную ширину / высоту)
онлайн-конвертер: r12a.github.io/apps/conversion (использовать результат экранирования CSS)
Для тех, кто собирается использовать два a0 для более широкого пространства, попробуйте 02 для n-пространства или 03 для m-пространства. По ширине похож на n-тире и mdash.
как мы можем использовать такой кастомный HTML? например, я хочу использовать изображение svg в качестве содержимого в нескольких местах, можно ли это сделать вот так?
Обновлять: PointedEars упоминает, что правильной заменой во всех ситуациях css будет '\a0 ' подразумевает, что пробел является ограничителем шестнадцатеричной строки и поглощается экранированной последовательностью. Далее он указал на этот авторитетное описание, который звучит как хорошее решение проблемы, которую я описал и исправил ниже.
Что вам нужно сделать, так это использовать экранированный юникод. Несмотря на то, что вам сказали, \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.
Вам просто нужно поставить пробел после escape-последовательности, как указано: '\a0 Break'. '\0000a0Break' является надежным нет.
@PastedEars Интересно, значит, этот пробел является терминатором и не попадает в строку?
См. CSS 2.1, раздел «4.1.3 Символы и регистр». Это также показывает, что ваш подход ДОЛЖЕН быть надежным в соответствии с CSS 2.1. Но я считаю, что подход с пустым пространством чище (совместим с восходящей) и имеет меньшую площадь.
Есть способ вставить nbsp - откройте CharMap и скопируйте персонаж 160. Однако в этом случае я бы, вероятно, выделил это отступом, например:
.breadcrumbs a:before { content: '>'; padding-right: .5em; }
Однако вам может потребоваться установить хлебные крошки display:inline-block или что-то в этом роде.
Вместо того, чтобы вставлять nbsp, я бы предпочел использовать сущность, чтобы будущим сопровождающим было ясно, что она отличается от пространства.
с другой стороны, вы не делаете хлебные крошки, как они должны быть, то есть: символ> должен быть встроен в хлебные крошки, а не только визуальный стиль. по крайней мере, если вы хотите, чтобы Google увидел ваши хлебные крошки и перечислил их под вашим списком в поисковой системе.
правильно вставка разыскиваемого персонажа у меня сработала. Благодарность
В CSS вам нужно использовать escape-последовательность Unicode вместо HTML Entities. Это основано на шестнадцатеричном значении символа.
Я обнаружил, что самый простой способ преобразовать символы в их шестнадцатеричный эквивалент, например, из ▾ (▾) в BE, - это использовать калькулятор Microsoft =)
да. Включите режим программиста, включите десятичную систему, введите 9662, затем переключитесь на шестнадцатеричный, и вы получите 25BE. Затем просто добавьте обратную косую черту \ в начало.
Хотя он полностью полезен, на самом деле он не отвечает на вопрос, поэтому было бы лучше в качестве комментария к вопросу.
Черная маленькая стрелка, указывающая вправо (▸ B8▸▸) ftw. Также см. en.wikipedia.org/wiki/Geometric_Shapes для получения дополнительной информации.
2Джоэль Пурра, читайте больше времени вики. вы ошиблись в символах.
@netgoblin: как так? Мне просто нравится черная маленькая стрелка, указывающая вправо.
Я использую этот graphemica.com, где вы можете получить десятичное, шестнадцатеричное и т. д.
CSS - это не HTML. - это имя характеристика личности в HTML; эквивалентно десятичному цифровому символу  . 160 - это десятичное кодовая точка символа NO-BREAK SPACE в Юникод (или UCS-2; см. HTML 4.01 Спецификация). Шестнадцатеричное представление этой кодовой точки - U + 00A0 (160 = 10 × 161 + 0 × 160). Вы найдете это в Unicode Таблицы кодов и База данных персонажей.
В CSS вам необходимо использовать escape-последовательность Unicode для таких символов, которая основана на шестнадцатеричном значении кодовой точки символа. Итак, вам нужно написать
.breadcrumbs a:before {
content: '\a0';
}
Это работает до тех пор, пока escape-последовательность идет последней в строковом значении. Если за ним следуют символы, есть два способа избежать неправильного толкования:
a) (упомянутые другими) Используйте ровно шесть шестнадцатеричных цифр для 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 Символы и регистр».
+1 за уловку «отобразить пробел после экранированного символа», но следует упомянуть, что добавление nbsp, а затем пробела нарушает цель nbsp;)
@TWiStErRob Нет, комбинация символа неразрывного пробела, за которым следует символ разбиения (или наоборот), будет отображать пробел шириной около символов пробела два, в то время как два или более символа пробела дословно будут отображать только пробел ширина символа пробела один, поскольку синтаксический анализатор механизма компоновки сворачивает последовательные разбивающие пробелы (включая новую строку) в один символ пробела, если white-space CSS свойство не объявляет иное.
да, я знаю о сворачивании, но суть nbsp в том, что он неразрывный, символы слов также не разрываются по умолчанию, поэтому добавление разрывающего пробела рядом с неразрывным не имеет смысла, конечный результат будет ломка. Я говорю о white-space: normal.
@TWiStErRob Пожалуйста, прочтите мой ответ внимательнее. Это пример для «отображения пробела после экранированного символа». В исходном коде был символ NO-BREAK SPACE, поэтому я использовал для него escape-последовательность. Вы можете выбрать любую другую escape-последовательность; при необходимости вы также можете объявить white-space: nowrap.
Например :
http://character-code.com/arrows-html-codes.php
Пример: если вы хотите выбрать своего персонажа, я выбрал «& # 8620» «& # x21ac» (мы используем значения HEX)
.breadcrumbs a:before {
content: '\0021ac';
}
Результат: ↬
Вот и все :)
я использовал контент: '\ 10095'; . Но вывод не отображается. вместо значка отображается прямоугольник.
Вот два способа:
В HTML:
<div class = "ics">⛱</div>
Это приведет к ⛱
В Css:
.ics::before {content: "69;"}
с HTML кодом <div class = "ics"></div>
Это также приводит к ⛱
Правильный ответ: .ics :: before {content: '\ 9969';}
Для HTML вам не нужен div class = ics. Вы можете просто сделать & # <number>;. Также обратите внимание, не является ли это шестнадцатеричным числом, и в этом случае вам нужно & # x <шестнадцатеричное число>; w3schools.com/html/html_symbols.asp
Я знаю, что это довольно старый пост, но если интервал - это все, что вам нужно, почему бы просто не:
.breadcrumbs a::before {
content: '>';
margin-left: 8px;
margin-right: 8px;
}
Я использовал этот метод раньше. В моем тестировании он отлично сочетается с другими строками с символом ">" рядом с ним.
В другом смысле добавление контента с использованием CSS нарушает разделение задач, CSS предназначен только для определений стилей. С точки зрения доступности предпочтительнее избегать, так как отключение CSS портит всю разметку. Тем не менее, неплохо добавлять изображения, используя эту технику.