केवल सीएसएस का उपयोग करके लाइन ब्रेक (जैसे <br>)

Question

क्या यह शुद्ध सीएसएस में संभव है, जो अतिरिक्त एचटीएमएल टैग को जोड़े बिना, लाइन ब्रेक की तरह बना सकता है <br>? मैं <h4>तत्व के बाद लाइन को तोड़ना चाहता हूं , लेकिन इससे पहले नहीं:

एचटीएमएल

<li>
  Text, text, text, text, text. <h4>Sub header</h4>
  Text, text, text, text, text.
</li>

सीएसएस

h4 {
  display: inline;
}

मुझे इस तरह के कई सवाल मिले हैं, लेकिन हमेशा "उपयोग प्रदर्शन: ब्लॉक;" जैसे उत्तरों के साथ । , जो मैं नहीं कर सकता, जब <h4>एक ही लाइन पर रहना चाहिए।

Comments

यह तत्व h4 क्यों है? आप इसे इस तरह से एक जगह पर क्यों इस्तेमाल करते हैं?

— टोनहीज़्विद्ज़

हमारी जिज्ञासा, क्या कारण है कि आप <br/> का उपयोग नहीं करना चाहते हैं?

— फिलिप किर्कब्राइड

कारण: मेरे पास सूची तत्वों का एक बहुत कुछ है। और मैं भी सोच रहा था कि क्या एक सुंदर समाधान मौजूद है। तत्वों के बीच br टैग का उपयोग करना आम तौर पर अच्छा नहीं है (और मैं हेडर को अपने तत्व के रूप में देखता हूं)

— स्टीवन

@, यह एक सरल उदाहरण है। मेरे पास प्रत्येक सूची तत्व में सोम टेक्स्ट और हेडर हैं।

— स्टीवन

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

— उपयोगकर्ता

Answer 1

यह इस तरह काम करता है:

h4 {
    display:inline;
}
h4:after {
    content:"\a";
    white-space: pre;
}

उदाहरण: http://jsfiddle.net/Bb2d7/

ट्रिक यहाँ से आती है: https://stackoverflow.com/a/66000/509752 (अधिक विवरण के लिए)

Comments

\aलाइन ब्रेक का मतलब है, चरित्र U + 000A, और white-space: preब्राउज़रों को इसे लाइन ब्रेकिंग के रूप में व्यवहार करने के लिए कहता है।

— जुक्का के। कोर्पेला

ठीक है, धन्यवाद @ JukkaK.Korpela। तो फिर इसे पहली जगह पर लाइन ब्रेक के रूप में क्यों नहीं प्रस्तुत किया गया है? हालांकि यह समाधान सरल है, फिर भी यह अन्य सफेद-अंतरिक्ष कमांड को ओवरराइड करेगा।

— स्टीवन

@ सेंटीवेन, यह केवल छद्म तत्व white-spaceपर प्रारंभिक मूल्य को ओवरराइड करता है :after, जिसमें सिर्फ लाइन ब्रेक होता है। और इसकी आवश्यकता है क्योंकि HTML में, डिफ़ॉल्ट रूप से, तत्व सामग्री में एक पंक्ति विराम एक स्थान के बराबर है और प्रदान किए गए दस्तावेज़ में एक पंक्ति विराम का कारण नहीं बनता है।

— जुका के। कोर्पेला

@ धन्यवाद, धन्यवाद, समझ में आता है और पूरी तरह से मुझे एक ही समय में बाहर निकालता है।

— सोनज

ऐसा कभी नहीं सोचा होगा। यह एक शर्म की बात है, हालांकि HTML सम्मिलित नहीं कर सकता है!

— Lodewijk

Answer 2

प्रयत्न

h4{ display:block;}

अपनी सीएसएस में

http://jsfiddle.net/ZrJP6/

Comments

इसके अलावा कुछ विवेकपूर्ण उपयोग margin-bottomआपको वहां होने चाहिए।

— जेरेमी होलोवक्स

लेकिन अगर मैं अच्छी तरह से समझता हूं, तो h4 को उसी पंक्ति में होना चाहिए जो पाठ से पहले था। प्रदर्शन के साथ: ब्लॉक, h4 से पहले एक लाइन ब्रेक है।

— एड्रियेंटोइन

क्या? margin-bottomपूर्ववर्ती पाठ के समान h4 को एक ही पंक्ति में रखेगा?

— स्टीवन

!! यह एक कार्यशील समाधान नहीं है: आपकी लाइन के बाद सफारी जैसे ब्राउज़रों में "प्रदर्शन: कोई नहीं" होगा !!

— ग्रेगब्रिक

Answer 3

आप इनहाइट ब्लॉक ::afterबनाने के लिए उपयोग कर सकते हैं , जो अगली पंक्ति के बाद प्रभावी रूप से कुछ भी ले जाता है :0px<h4><h4>

h4 {
  display: inline;
}
h4::after {
  content: "";
  display: block;
}

<ul>
  <li>
    Text, text, text, text, text. <h4>Sub header</h4>
    Text, text, text, text, text.
  </li>
</ul>