सीएसएस डेटा विशेषता नई लाइन वर्ण और छद्म-तत्व सामग्री मान

Question

क्या डेटा विशेषता में कोई नई पंक्ति हो सकती है?

मैं इस तरह कुछ करने के लिए कोशिश कर रहा हूँ:

सीएसएस:

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

एचटीएमएल

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

मैंने पाया कि "एक \" सीएसएस में एक नई लाइन है, लेकिन अभी भी मेरे लिए काम नहीं करता है

Answer 1

यहां यह काम कर सकता है।

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

और सीएसएस (अवधारणा का सबूत):

[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 इकाई करता है, 
।

सीएसएस 2.1 spec के अनुसार, attr(attribute-label) एक स्ट्रिंग देता है लेकिन स्ट्रिंग को सीएसएस प्रोसेसर द्वारा पार्स नहीं किया जाता है (मुझे यकीन नहीं है कि इसका क्या अर्थ है)। मैं अनुमान लगाता हूं कि कोड प्रदर्शित होने के लिए \a को सीएसएस प्रोसेसर द्वारा व्याख्या किया जाना चाहिए।

इसके विपरीत, HTML इकाई सीधे ब्राउज़र द्वारा व्याख्या की जाती है (मुझे लगता है ...) तो यह काम प्रतीत होता है।

हालांकि, लाइन फ़ीड काम करने के लिए, आपको छद्म-तत्व में सफेद स्थान को संरक्षित करने के लिए white-space: pre सेट करने की आवश्यकता है। नोट: आप अपनी सामग्री की प्रकृति के आधार पर pre-wrap, या pre-line पर भी विचार कर सकते हैं।

संदर्भ

एक linefeed के लिए HTML इकाई कोड हो रही के बारे में:
http://www.fileformat.info/info/unicode/char/000a/index.htm

content संपत्ति के लिए attr() मूल्य के बारे में:
http://www.w3.org/TR/CSS2/generate.html#content

Answer 2

आप एक सादे लाइन का उपयोग कर सकते एक विशेषता मूल्य के अंदर तोड़ें:

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

ब्राउज़र इस संबंध में छोटी गाड़ी रही है, और HTML विनिर्देश इस पर स्पष्ट नहीं हैं; वे तत्व सामग्री (जहां वे रिक्त स्थान के बराबर ले रहे हैं) में लाइन ब्रेक के अर्थ पर चर्चा करते हैं, लेकिन विशेषता मानों में नहीं। एचटीएमएल 5 सीआर में, parsing rules for attribute values यह स्पष्ट करता है कि लाइन ब्रेक को विशेषता मान में जोड़ा जाता है। आधुनिक ब्राउज़र आमतौर पर ऐसे नियमों से खेलते हैं।

हालांकि, जब तुम attr(...) के माध्यम से सीएसएस में मान का उपयोग, लाइन ब्रेक आम तौर पर एक अंतरिक्ष के बराबर माना जाएगा, तो आप पंक्ति विराम सम्मानित, अर्थात् करता है कि एक मूल्य के लिए छद्म तत्व पर white-space निर्धारित करने की आवश्यकता pre, pre-wrap, या pre-line।

पीएस एचटीएमएल में, \a नोटेशन केवल दो डेटा वर्ण हैं, बिना किसी विशेष अर्थ के। नोटेशन 
 लाइन ब्रेक (विशेष रूप से, लाइन फीड) को इंगित करेगा, लेकिन यह सॉस में वास्तविक लाइन ब्रेक के बराबर होगा।

Answer 3

... और यदि आप इसे समझने की कोशिश कर रहे हैं और 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.) 

Answer 4

ठीक है, यहाँ यह करने के लिए एक आसान तरीका है। आप के रूप में

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

और बदले .text() का उपयोग करने का यह लिखना चाहिए, तो आपको .html उपयोग कर सकते हैं()। जब आप .html() का उपयोग करते हैं तो यह लाइन ब्रेक के रूप में ले जाएगा और इससे आपकी समस्या हल होनी चाहिए।