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

170

मुझे ऐसा लगता है कि मैंने एक तत्व से पहले लाइन ब्रेक टैग डालने के लिए, सीएसएस सामग्री संपत्ति का उपयोग करते हुए एक रास्ता देखा। जाहिर है कि यह काम नहीं करता है:

#restart:before { content: '<br/>'; }

लेकिन आप यह कैसे करते हैं?

css

— mheavers
स्रोत

2

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

— टोड मूसा

40

ऐसा लगता है कि लेआउट और प्रवाह (लाइन ब्रेक को या तो माना जा सकता है) निश्चित रूप से सीएसएस के डोमेन के भीतर हैं।

— ट्रेवर

12

सीएसएस पूरी तरह से सामग्री जोड़ने या संपादित करने के लिए है जब यह एक सुसंगत स्टाइलिंग तत्व है जो आपके विषय का एक हिस्सा है। विशेष रूप से वर्डप्रेस जैसी सामग्री प्रबंधन प्रणालियों के साथ जो आपको अपनी सामग्री को संपादित करने की अनुमति नहीं देते हैं, इसके अत्यधिक उपयोगी हैं। यही कारण है कि "सामग्री" संपत्ति मौजूद है। सामग्री जोड़ने और / या संपादित करने के लिए।

— फी लॉरेन

266

यह psuedo- तत्व उत्पन्न सामग्री में \A बच अनुक्रम का उपयोग करना संभव है। CSS2 कल्पना में अधिक पढ़ें ।

#restart:before { content: '\A'; }

आपको भी जोड़ना पड़ सकता white-space:pre;है #restart।

नोट: \Aएक पंक्ति के अंत को दर्शाता है।

ps होने का एक और इलाज

:before { content: ' '; display: block; }

— bookcasey
स्रोत

11

व्हाइट-स्पेस भी आज़माएं: प्री-रैप; यदि आप अपने पाठ को लपेटना चाहते हैं।

— जाज

6

प्रतिभाशाली। हालांकि, यह ध्यान दिया जाना चाहिए कि इसके लिए काम #restartकरना चाहिएdisplay: inline;

— ट्रॉय अल्फोर्ड

23

यह मेरे लिए काम नहीं किया, मैं :before { content: ' '; display: block; }इसके बजाय इस्तेमाल किया।

— बोगडानियो

1

किसी कारण से कोई भी समाधान inline-blockतत्वों के साथ काम नहीं करता है। वे बस अगली पंक्ति पर नहीं जाएंगे। केवल समाधान वास्तव <div></div>में HTML में एक खाली जोड़ना था ।

— एडम रीस

2

अगर लाइन नहीं टूटी, तो आप 'व्हाइट-स्पेस' प्रॉपर्टी का उपयोग कर सकते हैं: {सामग्री: 'ए' से पहले; सफेद-स्थान: पूर्व; }

— अमृत

35

यदि #restartकोई इनलाइन तत्व (जैसे <span>, <em>आदि) है, तो आप इसका उपयोग करके एक ब्लॉक तत्व में बदल सकते हैं:

#restart { display: block; }

यह तत्व से पहले और बाद दोनों में एक लाइन ब्रेक सुनिश्चित करने का प्रभाव होगा।

वहाँ कुछ है कि एक लाइन ब्रेक की तरह काम करता डालने सीएसएस करने के लिए एक तरीका नहीं है केवल एक तत्व पहले और बाद में नहीं। आप शायद अन्य परिवर्तनों के साइड-इफेक्ट के रूप में पहले एक लाइन-ब्रेक का कारण बन सकते हैं, उदाहरण के लिए float: left, या clear: leftएक फ़्लोट किए गए तत्व के बाद, या यहां तक कि कुछ पागल जैसा भी हो #restart:before { content: 'a load of non-breaking spaces'; }लेकिन यह सामान्य मामले में एक अच्छा विचार नहीं है।

— bobince
स्रोत

1

यह प्रदर्शित नहीं किया जा सकता है: ब्लॉक - क्योंकि तब मुझे पृष्ठ भर में सभी तरह से चलने से अपनी पृष्ठभूमि को बनाए रखने के लिए तत्व के लिए एक चौड़ाई प्रदर्शित करने की आवश्यकता होगी। इसे तत्व के लिए चौड़ाई सेट करने में सक्षम होना चाहिए।

— 15

3

एक float: leftतत्व कुछ काम का हो सकता है, क्योंकि वे सिकुड़ जाते हैं और एक नई रेखा पर शुरू होते हैं। अन्यथा, आप जो चाहते हैं वह संभव नहीं हो सकता है।

— बॉब

नीच कारण कभी-कभी डेवलपर्स एक बड़ी परियोजना में काम करते हैं जहां उनका नियंत्रण नहीं होता है या किसी अन्य समाधान को लागू करने का निर्णय नहीं ले सकता है।

— पलककुल

19

यह मेरे लिए काम करता है:

#restart:before {
    content: ' ';
    clear: right;
    display: block;
}

— hutorny
स्रोत

किसी कारण से, नई लाइन के लिए विभिन्न यूनिकोड वर्ण मेरे लिए काम नहीं कर रहे थे ..? यह समाधान हालांकि चाल किया - धन्यवाद!

— जीन बो

1

हाँ, लेकिन तब क्या होता है जब आपको टेक्स्ट को कंटेंट के अंदर रखना पड़ता है !? उत्तर

— सांडोर जुबोली

12

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

#restart:before { content: '\00000A'; }

— जेसी किंसमैन
स्रोत

11

निम्नलिखित सीएसएस ने मेरे लिए काम किया:

/* newline before element */
#myelementId:before{
    content:"\a";
    white-space: pre;
}

— rluks
स्रोत

सादे सीएसएस के साथ उत्कृष्ट विचार

— नवेंदा

मेरे लिए आकर्षण का काम किया। मैं इसका उपयोग कर रहा हूं:content: 'bar: \a' attr(data-description);

— जिमी एडारो

यह सही उत्तर है

— c

10

सीएसएस के माध्यम से उत्पन्न सामग्री को जोड़ने के दो कारण हैं, जैसे आप चाहते हैं:

उत्पन्न सामग्री सामग्री को स्वीकार करती है और मार्कअप नहीं। मार्कअप का मूल्यांकन नहीं किया जाएगा, लेकिन केवल प्रदर्शित किया जाएगा।
:beforeऔर :afterउत्पन्न सामग्री को तत्व के भीतर जोड़ा जाता है, इसलिए यहां तक कि एक स्थान या अक्षर को जोड़ने और इसे परिभाषित करने से blockकाम नहीं चलेगा।

एक ::outsideछद्म तत्व है जो वह कर सकता है जो आप चाहते हैं। हालाँकि, कोई ब्राउज़र समर्थन नहीं प्रतीत होता है। (यहां पढ़ें: http://www.w3.org/TR/css3-content/#wrapping )

सर्वश्रेष्ठ शर्त यहां jQuery के एक बिट का उपयोग करें:

$('<br />').insertBefore('#restart');

उदाहरण: http://jsfiddle.net/jasongennaro/sJGH9/1/

— जेसन गेनारो
स्रोत

"सीएसएस का उपयोग करना"। मुझे जेसी किंसमैन के काम के समान उत्तर मिला।

— RonnyKnoxville

4

हां, पूरी तरह से संभव है लेकिन यह निश्चित रूप से कुल हैक है (ऐसे कोड लिखने के लिए लोग आपको गंदे लग सकते हैं)।

यहाँ HTML है:

<div>lorem ipdum dolor sit <span id="restart">amit e pluribus unum</span></div>

यहाँ सीएसएस है:

#restart:before { content: 'hiddentext'; font-size:0; display:block; line-height:0; }

यहाँ फिडेल है: http://jsfiddle.net/AprNY/

— hammerbrostime
स्रोत

रचनात्मकता के लिए +1। मुझे ऐसा कुछ मिला है जो मैं एक बाहरी स्रोत से शामिल कर रहा हूं और वास्तविक HTML को बदल नहीं सकता ... यह ठीक काम करने के लिए प्रतीत होता है :) धन्यवाद!

— counterbeing

3

निम्नलिखित आज़माएँ:

#restart::before {
  content: '';
  display: block;
}

— उपयोगकर्ता
स्रोत

एक टिप: कम से कम एक-लाइनर टिप्पणी जोड़ें, ताकि आपके पोस्ट डिफ़ॉल्ट रूप से वीएलक्यूक्यू में समाप्त न हों।

— डिडुप्लीकेटर

1

यह मानते हुए कि आप लाइन की ऊंचाई 20 px चाहते हैं

  .restart:before { 
     content: 'First Line';
     padding-bottom:20px;
  }
  .restart:after { 
    content: 'Second-line';
    position:absolute;
    top:40px;
  }

— करीम
स्रोत

1

मेरे पास पहले से ब्रेक डालने के साथ कोई भाग्य नहीं था: पहले। मेरा समाधान एक वर्ग के साथ एक स्पैन जोड़ना और स्पैन के अंदर ब्रेक लगाना था। फिर कक्षा को प्रदर्शित करने के लिए बदलें: कोई नहीं; या प्रदर्शन: आवश्यकतानुसार ब्लॉक करें।

एचटीएमएल

    <div>
         <span class="ItmQty"><br /></span>
         <span class="otherclass">
              <asp:Label ID="QuantityLabel" runat="server" Text="Qty: ">      
              </asp:Label>
         </span>
         <div class="cartqty">
              <asp:TextBox ID="QuantityTextBox" runat="server" Text='<%# Bind("Quantity","{0:#}") %>' Width="50"></asp:TextBox>

         </div>
    </div>

सीएसएस

@media only screen and (min-width: 854px)
{
    .ProjItmQty
    {
        display: block;
        clear: both;
    }
}
@media only screen and (min-width: 1003px)
{
    .ProjItmQty
    {
        display: none;
    }
}

उम्मीद है की यह मदद करेगा।

— आरे
स्रोत

1

आप अपने दस्तावेज़ को <br>टैग के साथ पॉप्युलेट कर सकते हैं और उन्हें किसी अन्य की तरह css के साथ बंद कर सकते हैं:

<style>
.hideBreaks {
 display:none;
}
</style>
<html>
just a text line<br class='hideBreaks'> for demonstration
</html>

— जैकहैमर
स्रोत

0

आप 
अपनी सामग्री में एक पंक्ति विराम के लिए पूर्व-एन्कोडेड एचटीएमएल इकाई का उपयोग भी कर सकते हैं और इसका समान प्रभाव पड़ेगा।

— हेनरी गिब्सन
स्रोत

0

body * { line-height: 127%; }
p:after { content: "\A "; display: block; white-space: pre; }

https://www.w3.org/TR/CSS2/generate.html#x18 The Content Proerty, "newlines" ... p मूल ब्लॉक के अंदर p के अंत में मार्जिन और पैडिंग नहीं जोड़ेगा (उदाहरण के लिए, body ›अनुभाग) पी)। "\" ए लाइन ब्रेक बलों लाइन स्पेस, समकक्ष स्टाइल लाइन-ऊंचाई।

— मार्क स्टीवर्ट
स्रोत

-1

एक जोड़े margin-top:20px;के लिए #restart। या जो भी आकार अंतर आपको उचित लगे। यदि यह इनलाइन-एलीमेंट है, तो आपको IE के पुराने संस्करणों पर काम करने display:blockया जोड़ने की display:inline-blockआवश्यकता नहीं होगी inline-block।

— punkrockbuddyholly
स्रोत

कोई समस्या नहीं है कि तत्व का प्रदर्शन प्रकार इनलाइन-ब्लॉक है, इसलिए मुझे तत्व से पहले एक ब्रेक की आवश्यकता है।

— 15

प्रदर्शन प्रकार पहले से इनलाइन-ब्लॉक है। मैं वह करने की कोशिश कर रहा हूं जो मैंने सामग्री संपत्ति का उपयोग करके ऊपर पूछा था।

— 15

आप सामग्री गुण का उपयोग करके html तत्व नहीं जोड़ सकते, यह संभव नहीं है।

— punkrockbuddyholly

क्योंकि आपके उत्तर से उसकी समस्या हल नहीं हुई होगी। विजयी उत्तर को देखें जो सामग्री संपत्ति (जो html तत्वों को स्वीकार नहीं करेगा) का उपयोग करके लाइन ब्रेक प्रदान करने का एक तरीका बताता है। शायद यह मूल प्रश्न की गलतफहमी थी।

— pdwalker

-1

मैन्युअल रूप से लाइन ब्रेक को किसी तरह जोड़ने के बजाय, आप कार्यान्वित कर सकते हैं border-bottom: 1px solid #ff0000जो तत्व की सीमा को ले जाएगा और border-<side>जो भी आप निर्दिष्ट करते हैं, केवल उसी को प्रस्तुत करें।

— andy4thehuynh
स्रोत

2

ओपी ने बराबरी के लिए कहा <br>, नहीं <hr>।

— बेनी चेर्नियाव्स्की-पास्किन