web-dev-qa-db-ja.com

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の新しい行であることがわかりましたが、それでもうまくいきません。

htmlcssnewlinepseudo-elementcss-content
39
Snaker.Wood

これがどのように機能するかを次に示します。次のようにデータ属性を変更する必要があります。

_<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;
}
_

Fiddle Demo： http://jsfiddle.net/audetwebdesign/cp4RF/

仕組み

_\a_を使用しても機能しませんが、同等のHTMLエンティティは_&#xa;_です。

CSS2.1仕様によると、attr(attribute-label)は文字列を返しますが、文字列はCSSプロセッサによって解析されません（これが正確に何を意味するのかわかりません）。コードをプロパティとして表示するには、CSSプロセッサが_\a_を解釈する必要があると推測します。

対照的に、HTMLエンティティはブラウザによって直接解釈されるので（おそらく...）、動作しているように見えます。

ただし、改行を機能させるには、_white-space: pre_を設定して、擬似要素の空白を保持する必要があります。注：コンテンツの性質に応じて、_pre-wrap_または_pre-line_を考慮することもできます。

参照

改行のHTMLエンティティコードの取得について：
http://www.fileformat.info/info/unicode/char/000a/index.htm

contentプロパティのattr()値について：
http://www.w3.org/TR/CSS2/generate.html#content

60
Marc Audet

属性値内で単純な改行を使用できます。

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

この点でブラウザーはバグが多く、これに関するHTML仕様は明確ではありません。属性値ではなく、要素content（スペースと同等である）での改行の意味について説明します。 HTML5 CRでは、 属性値の解析規則 により、改行が単純に属性値に追加されることが明確になります。最近のブラウザは、一般的にこのようなルールでプレイします。

ただし、CSSでattr(...)を介して値を使用する場合、改行は通常、スペースと同等として扱われるため、擬似要素の_white-space_を次の値に設定する必要があります。 pre、_pre-wrap_、または_pre-line_のように改行を受け入れます。

追伸HTMLでは、_\a_という表記は2つのデータ文字であり、特別な意味はありません。表記_&#xa;_は改行（具体的にはLINE FEED）を示しますが、実際のソースの改行と同等です。

6
Jukka K. Korpela