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

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

एचटीएमएल

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

सीएसएस

h4 { 
    display: inline; 
}

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

स्रोत

2012-06-07 Steeven

क्यों इस तत्व एक h4 है: http://jsfiddle.net/Bb2d7/

चाल यहाँ से आता है? आप इसे इस तरह के स्थान पर क्यों उपयोग करते हैं? – toniedzwiedz

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

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

111

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

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

उदाहरण: https://stackoverflow.com/a/66000/509752 (अधिक विवरण के लिए)

स्रोत

2012-06-07 14:44:27 adriantoine

अच्छा। क्या करता है? – Steeven

'\ a' का अर्थ है लाइन ब्रेक, कैरेक्टर यू + 000 ए, और 'व्हाइट स्पेस: प्री' ब्राउज़र को रेन्डरिंग में लाइन ब्रेक के रूप में पेश करने के लिए कहता है। –

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

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

h4{ display:block;}

प्रयास करें

http://jsfiddle.net/ZrJP6/

स्रोत

2012-06-07 14:30:24

प्लस 'मार्जिन-तल' के कुछ न्यायिक उपयोग से आपको वहां मिलना चाहिए। –

लेकिन अगर मैं अच्छी तरह से समझता हूं, तो एच 4 को पहले टेक्स्ट के समान लाइन पर होना चाहिए। डिस्प्ले के साथ: ब्लॉक, एच 4 से पहले एक लाइन ब्रेक है। – adriantoine

क्या? 'मार्जिन-तल' एच 4 को पिछले पाठ के समान लाइन पर रखेगा? – Steeven

आप ::after का उपयोग <h4> के बाद एक 0px -height ब्लॉक बनाने के लिए है, जो प्रभावी रूप से अगली पंक्ति में <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>

स्रोत

2012-06-07 14:35:43 0b10011

उत्तर

संबंधित मुद्दे