छद्म तत्व सामग्री से पहले या बाद में :: के लिए लाइन ब्रेक जोड़ें

Question

मेरे पास एक पृष्ठ के लिए HTML या PHP तक पहुंच नहीं है और केवल CSS के माध्यम से संपादित कर सकते हैं। मैं एक साइट पर संशोधन कर रहा हूं ::afterया ::beforeछद्म तत्वों के माध्यम से पाठ जोड़ रहा हूं और पाया है कि बची हुई यूनिकोड का उपयोग सामग्री से पहले या बाद में अंतरिक्ष जैसी चीजों के लिए किया जाना चाहिए।

मैं contentसंपत्ति में कई लाइनें कैसे जोड़ूं ?

उदाहरण के लिए HTML ब्रेक लाइन तत्व केवल कल्पना करना है कि मैं क्या हासिल करना चाहता हूं:

#headerAgentInfoDetailsPhone::after
{
 content: 'Office: XXXXX <br /> Mobile: YYYYY ';
}

Comments

CSS कंटेंट को जोड़ने या संपादित करने के लिए नहीं है, यह कंटेंट को प्रदर्शित करने के तरीके को नियंत्रित करने के लिए है

— 15:11 पर

@SamithaHewawasam जब मैं आपके कथन से सहमत हूँ, तो ऐसा लग रहा है कि पोस्टर ने स्वयं को ऐसी स्थिति में पाया है जहाँ वे HTML को संपादित नहीं कर सकते। छोटी, सरल सामग्री के अतिरिक्त, मैं देख सकता हूं कि यह उपयोगी / आवश्यक क्यों होगा।

— ड्राइडन लॉन्ग

सीएसएस 'सामग्री' संपत्ति में न्यूलाइन वर्ण अनुक्रम

— साइमन

सीएसएस का उपयोग करने वाले तत्व से पहले एक लाइन ब्रेक कैसे डालें के

— उपयोगकर्ता

मैं यह भी तर्क दूंगा कि लाइन ब्रेक सामग्री संबंधित सामग्री की तुलना में कहीं अधिक प्रारूप-संबंधित हैं। एकमात्र तरीका है कि आप सामग्री में एक प्रारूप परिवर्तन का अवलोकन करके "लाइन" को देखते हैं।

— Isochronous

Answer 1

contentसंपत्ति कहता है:

लेखक 'सामग्री' की संपत्ति के बाद स्ट्रिंग्स में से एक में "\" एक्शन सीक्वेंस लिखकर जेनरेट की गई कंटेंट में नईलाइन शामिल कर सकते हैं। यह सम्मिलित लाइन ब्रेक अभी भी 'व्हाइट-स्पेस' संपत्ति के अधीन है। "स्ट्रिंग्स" और "वर्णों और केस" को "ए" एस्केप अनुक्रम पर अधिक जानकारी के लिए देखें।

तो आप उपयोग कर सकते हैं:

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

http://jsfiddle.net/XkNxs/

हालांकि, मनमाने तार से बचते हुए, इसके \00000aबजाय उपयोग करने की सलाह दी जाती है \A, क्योंकि [a-f]नई पंक्ति के बाद कोई भी संख्या या वर्ण अप्रत्याशित परिणाम दे सकता है :

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\\"').replace(/\n/g, '\\00000a')} }"`;
}

Comments

एक पल के लिए मुझे लगा कि "क्यों \Aऔर क्यों नहीं \n" - फिर मुझे याद आया कि न्यूलाइन है 0x0A:)

— कैमिलो मार्टिन

मैंने प्रिंट मीडिया क्वेरी के साथ यह कोशिश की, यह काम नहीं करता है। क्या यह बग है या यह डिफ़ॉल्ट व्यवहार है? प्रिंट मीडिया के बिना, यह काम करता है।

— harryfeng

उल्लेख करने के लिए धन्यवाद pre-wrap! मुझे #headerAgentInfoDetailsPhone क्रोम जैसे ब्लिंक इंजन वेब ब्राउज़र में और अधिक लपेटने की समस्या नहीं थी । फ़ायरफ़ॉक्स white-space: pre;तत्व के लिए वापस प्रचारित संपत्ति के लिए अतिसंवेदनशील नहीं है ।

— सर्ज स्ट्रोबंड्ट

Answer 2

मूल बातें बताते हुए अच्छा लेख (हालांकि, लाइन ब्रेक को कवर नहीं करता है)।

अद्भुत सामान छद्म तत्वों की एक पूरी गुच्छा कर सकते हैं

यदि आपको दो इनलाइन तत्वों की आवश्यकता होती है जहां एक अन्य तत्व के भीतर अगली पंक्ति में टूट जाता है, तो आप एक छद्म तत्व को जोड़कर इसे पूरा कर सकते हैं: सामग्री के बाद: '\' ए और श्वेत-स्थान: पूर्व

एचटीएमएल

<h3>
    <span class="label">This is the main label</span>
    <span class="secondary-label">secondary label</span>
</h3>

सीएसएस

.label:after {
    content: '\A';
    white-space: pre;
}

Answer 3

मुझे टूलटिप में नई लाइनें मिलनी थीं। मुझे इस सीएसएस को अपने साथ जोड़ना था: के बाद:

.tooltip:after {
  width: 500px;
  white-space: pre;
  word-wrap: break-word;
}

शब्द-आवरण आवश्यक लगता है।

इसके अलावा, नई पंक्ति को प्रदर्शित करने के लिए पाठ के बीच में \ A काम नहीं करता है।

 
 

काम किया। मैं तब ऐसे टूलटिप प्राप्त करने में सक्षम था:

Answer 4

आप यह कोशिश कर सकते हैं

#headerAgentInfoDetailsPhone
{
    white-space:pre
}
#headerAgentInfoDetailsPhone:after {
    content:"Office: XXXXX \A Mobile: YYYYY ";
}

जेएस फिडल

Answer 5

ऐसे लोगों के लिए जो 'यहाँ नई लाइन साइन जोड़ते हुए छद्म तत्व पर डायनामिकली कंटेंट कैसे बदलें' की तलाश करने जा रहे हैं

Html chars 
उन्हें जावास्क्रिप्ट का उपयोग करके HTML में जोड़ने के लिए काम नहीं करेगा क्योंकि उन पात्रों को दस्तावेज़ रेंडर पर बदल दिया जाता है

इसके बजाय आपको इस वर्णों के यूनिकोड निरूपण की आवश्यकता है जो U + 000D और U + 000A हैं ताकि हम कुछ ऐसा कर सकें

var el = document.querySelector('div');
var string = el.getAttribute('text').replace(/, /, '\u000D\u000A');
el.setAttribute('text', string);

div:before{
   content: attr(text);
   white-space: pre;
}

<div text='I want to break it in javascript, after comma sign'></div> 

आशा है कि यह किसी को समय बचाने के लिए, सौभाग्य :)

Answer 6

::afterया ::beforeछद्म तत्व सामग्री के लिए लाइन ब्रेक जोड़ें

.yourclass:before {
    content: 'text here first \A  text here second';
    white-space: pre;
}

Answer 7

यहाँ यह प्रश्न मिला है जो एक ही बात पूछता है: सीएसएस 'सामग्री' संपत्ति में न्यूलाइन वर्ण अनुक्रम?

ऐसा लगता है कि आप उपयोग कर सकते हैं \Aया \00000aप्राप्त करने के लिएnewline

Answer 8

<p>Break sentence after the comma,<span class="mbr"> </span>in case of mobile version.</p>
<p>Break sentence after the comma,<span class="dbr"> </span>in case of desktop version.</p>

.Mbr और .dbr कक्षाएं सीएसएस का उपयोग कर लाइन ब्रेक व्यवहार अनुकरण कर सकते हैं प्रदर्शन: तालिका । यदि आप वास्तविक <br /> को बदलना चाहते हैं तो उपयोगी है।

इस डेमो कोडपेन को देखें: https://codepen.io/Marko36/pen/RBweYY ,
और उत्तरदायी साइट उपयोग पर यह पोस्ट: उत्तरदायी लाइन-ब्रेक: दिए गए ब्रेकपॉइंट पर <br /> अनुकरण करें ।