Атрибут данных CSS новый символ строки и значение содержимого псевдоэлемента

Возможно ли иметь новую строку в атрибуте данных?

Я пытаюсь сделать что-то вроде этого:

CSS

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
}

HTML

<div data-foo="First line \a Second Line">foo</div>

Я обнаружил, что "\ a" - это новая строка в CSS, но все равно не работает для меня.

Ответ 1

Вот как это может работать. Вам необходимо изменить свой атрибут данных следующим образом:

<div data-foo='First line &#xa; Second Line'>foo</div>

и CSS (доказательство концепции):

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
    color: white;
    white-space: pre;
    display: inline-block;
}

Скриншот Демо: http://jsfiddle.net/audetwebdesign/cp4RF/

Как это работает

Использование \a не работает, но эквивалентный объект HTML делает, 
.

В соответствии с спецификацией CSS2.1, attr(attribute-label) возвращает строку, но строка не обрабатывается процессором CSS (я не уверен, что это означает точно). Я предполагаю, что \a должен интерпретироваться процессором CSS, чтобы код отображался как свойство.

Напротив, объект HTML интерпретируется браузером напрямую (я думаю...), поэтому он работает.

Однако для работы линии вам нужно установить white-space: pre для сохранения пробела в псевдоэлементе. Примечание: вы можете также рассмотреть именно pre-wrap или pre-line в зависимости от характера вашего контента.

Ссылка

Что касается получения кода сущности HTML для перевода строки:
http://www.fileformat.info/info/unicode/char/000a/index.htm

Что касается значения attr() для свойства content:
http://www.w3.org/TR/CSS2/generate.html#content

Ответ 2

Вы можете использовать простой разрыв строки внутри значения атрибута:

<div data-foo="First line
Second Line">foo</div>

Браузеры в этом отношении были ошибочны, и спецификации HTML не были достаточно ясными по этому поводу; они обсуждают значение разрывов строк в содержимом элементов (где они берутся как эквивалентные пробелам), но не в значениях атрибутов. В HTML5 CR правила синтаксического анализа атрибутов дают понять, что разрывы строк просто добавляются к значению атрибута. Современные браузеры обычно играют по таким правилам.

Однако, когда вы используете значение в CSS через attr(...), разрыв строки обычно рассматривается как эквивалентный пробелу, поэтому вам нужно установить white-space в псевдоэлементе на значение, которое делает разрывы строк, а именно pre, pre-wrap или pre-line.

P.S. В HTML обозначение \a - это всего лишь два символа данных без особого значения. Обозначение 
 будет означать разрыв строки (в частности, LINE FEED), но это будет просто эквивалентно фактическому разрыву строки в суме.

Ответ 3

Хорошо, вот один простой способ сделать это. вы должны написать его как

data-foo='First line </br> Second Line'

и вместо использования .text(), вы можете использовать .html(). когда вы используете .html(), тогда это займет отрыв строки, и это должно решить вашу проблему.

Ответ 4

... и если вы пытаетесь понять это и используете HAML и AngularJS, используйте \n.

%a.tooltip{:"data-tip" => "Cost Per Unit: {{humanized_cost}} \n(Calculated for applicable Feature Qty.) "}

приводит к:

Cost Per Unit: $10.54
(Calculated for applicable Feature Qty.)