<br> सीएसएस

Question

का उपयोग करके ऊंचाई बदलें मैंने यहां question देखा है, लेकिन मुझे काम करने के लिए कोई जवाब नहीं मिल रहा है (कम से कम क्रोम पर)।

यह प्रश्न केवल <br> के लिए है, मुझे ऊंचाई बदलने के लिए कई अन्य तकनीकें हैं, लेकिन इस मामले में मैं HTML नहीं बदल सकता।

bla<BR><BR>bla<BR>bla<BR><BR>bla 

सीएसएस:

br { 
    display: block; 
    margin-bottom: 2px; 
    font-size:2px; 
    line-height: 2px; 
} 

वांछित प्रभाव: छोटे अंतर-लाइन ऊंचाई।

एकमात्र चीज जिसे मैं काम पर प्राप्त कर सकता हूं display:none है, लेकिन फिर सभी लाइन ब्रेक हटा दिए जाते हैं।

कुछ तकनीकों का उपयोग करके fiddle for it यहां है, लेकिन देखें कि यह किसी भी सीएसएस के बिना सटीक समान प्रस्तुत करता है।

Answer 1

आप br टैग से की ऊंचाई को बदल नहीं सकते, क्योंकि यह एक तत्व उस पृष्ठ में स्थान में समा जाता है। यह एक नई लाइन बनाने के लिए सिर्फ एक निर्देश है।

आप line-height शैली का उपयोग कर लाइन ऊंचाई बदल सकते हैं। इससे आपके द्वारा रिक्त लाइनों द्वारा अलग किए गए टेक्स्ट ब्लॉक के बीच की दूरी बदलेगी, लेकिन टेक्स्ट ब्लॉक में रेखाओं के बीच भी दूरी होगी।

पूर्णता के लिए: HTML में टेक्स्ट ब्लॉक आमतौर पर p टेक्स्ट ब्लॉक के आसपास टैग का उपयोग करके किया जाता है। इस तरह आप p टैग के अंदर लाइन ऊंचाई को नियंत्रित कर सकते हैं, और p टैग के बीच की दूरी भी नियंत्रित कर सकते हैं।

Answer 2

line-height property पर एक नज़र डालें। <br> टैग शैली को स्टाइल करने का प्रयास जवाब नहीं है।

उदाहरण:

<p id="single-spaced"> 
    This<br> 
    text<br> 
    is<br> 
    single-spaced. 
</p> 
<p id="double-spaced" style="line-height: 200%;"> 
    This<br> 
    text<br> 
    is<br> 
    double-spaced. 
</p> 

Answer 3

यह बहुत hacky महसूस करता है, लेकिन ubuntu पर क्रोम 41 में मैं एक <br> थोड़ा stylable बना सकते हैं:

br { 
    content: ""; 
    margin: 2em; 
    display: block; 
    font-size: 24%; 
} 

मैं फ़ॉन्ट आकार के साथ रिक्ति नियंत्रित करते हैं।

Answer 4

<br> की रेखा ऊंचाई <p> के अंदर शेष पाठ की रेखा ऊंचाई से भिन्न हो सकती है। आप में स्टाइल किए गए <span> में दो को संलग्न करके अपने शेष <br> टैग की स्वतंत्रता रेखा को नियंत्रित कर सकते हैं। line-height सीएसएस संपत्ति का उपयोग करें, जैसा कि अन्य ने सुझाव दिया है।

<p class="normalLineHeight"> 
    Lots of text here which will display on several lines with normal line height if you put it in a narrow container... 
    <span class="customLineHeight"><br><br></span> 
    After a custom break, this text will again display on several lines with normal line height... 
</p> 

Answer 5

br टैग की लाइन ऊंचाई br टैग के लिए font-size स्थापना करके एक अनुच्छेद पाठ के अंदर का पाठ के बाकी की लाइन ऊंचाई से अलग हो सकता है।

उदाहरण: br { font-size: 200%; }

Answer 6

यदि आप इसे एक ऊंचाई सीमित div अंदर डाल आप <br> ऊंचाई नियंत्रित कर सकते हैं।प्रयास करें:

<div style="height:2px;"><br></div> 

Answer 7

सामग्री संपत्ति और शैली का प्रयोग करें कि सामग्री। सामग्री व्यवहार को छद्म तत्व का उपयोग करके समायोजित किया जाता है। छद्म तत्व :: मैक सफारी 10.0.3 में दोनों कामों के बाद पहले और :: ::।

यहाँ तत्व br सामग्री तत्व br के लिए तत्व लंगर :: सामग्री के बाद के रूप में प्रयोग किया जाता है। तत्व br वह जगह है जहां ब्रैसिंग को स्टाइल किया जा सकता है। br :: के बाद वह स्थान है जहां सामग्री के बाद br :: प्रदर्शित किया जा सकता है और स्टाइल किया जा सकता है। सुंदर लग रहा है, लेकिन 2px <br> नहीं।

br { content: ""; display: block; margin: 1rem 0; } 
br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; } 

br तत्व line-height संपत्ति नजरअंदाज कर दिया है। यदि नकारात्मक मानों को या तो दोनों या दोनों चयनकर्ताओं को ब्र टैग में लंबवत 'लिफ्ट' देने के लिए लागू किया गया है, तो लंबवत रिक्तियां सही होती हैं, लेकिन प्रत्येक br टैग के बाद वृद्धिशील इंडेंट प्रदर्शित सामग्री प्रदर्शित करें। इंडेंट वास्तव में उस राशि के बराबर है जो लिफ्ट वास्तविक टाइपोग्राफ़िक लाइन-ऊंचाई से भिन्न होता है। यदि आपको सही लिफ्ट लगता है, तो कोई इंडेंट नहीं है लेकिन कच्ची ग्लिफ ऊंचाई के बराबर एक एकल ढेर-रेखा है, जो पिछले और निम्न पंक्तियों के बीच जाली है।

इसके अलावा

, एक अनुगामी br टैग br वारिस के लिए निम्न HTML प्रदर्शन टैग का कारण होगा: सामग्री स्टाइल के बाद। इसके अलावा, छद्म तत्व < ब्र > <br> को <br> के रूप में व्याख्या करने के लिए कारण बनता है। जबकि छद्म-वर्ग br: सक्रिय अलग-अलग व्याख्या करने के लिए प्रत्येक <br> का कारण बनता है। अंत में, ब्र का उपयोग करके: सक्रिय छद्म तत्व छद्म तत्व br: और सभी ब्र: सक्रिय स्टाइल के बाद। तो, कि सभी आवश्यक है यह है:

br:active { } 

जो एक 2px उच्च <br> प्रदर्शन बनाने के लिए कोई मदद नहीं है। और यहां छद्म वर्ग: सक्रिय अनदेखा किया जाता है!

br:active { content: ""; display: block; margin: 1.25em 0; } 
br { content: ""; display: block; margin: 1rem; } 
br::after { content: "› "; /* content: " " space ignored */; float: left; margin-right: 0.5rem; } 

यह केवल एक आंशिक समाधान है। छद्म वर्ग और छद्म तत्व समाधान प्रदान कर सकते हैं, अगर tweaked। यह सीएसएस समाधान का हिस्सा हो सकता है। (मैं केवल सफारी है, अन्य ब्राउज़रों में यह प्रयास करें।)

Learn web development: pseudo classes and pseudo elements

Pay attention to global elements - BR at Mozilla.org

Answer 8

बीआर लेकिन 'अतिरिक्त विशेष' कुछ भी है: यह अभी भी एक मान्य XML टैग है कि आप गुण दे सकता है सेवा मेरे। उदाहरण के लिए, आपको रेखा-ऊंचाई को बदलने के लिए इसे एक अवधि के साथ एन्कस करने की आवश्यकता नहीं है, बल्कि आप सीधे तत्व पर लाइन ऊंचाई लागू कर सकते हैं।

आप इनलाइन सीएसएस के साथ यह कर सकता है:

This is a small line 
 
<br /> 
 
break. Whereas, this is a BIG line 
 
<br style="line-height:60vh" /> 
 
break!

तुम भी किसी भी CSS चयनकर्ताओं आप आईडी और वर्गों की तरह चाहते हैं का उपयोग कर सकते हैं।

#biglinebreakid { 
 
    line-height: 900%; 
 
    // 9x the normal height of a line break! 
 
} 
 
.biglinebreakclass { 
 
    line-height: calc(6em + 66px); 
 
    // you could even use calc! 
 
}

This is a small line 
 
<br /> 
 
break. Whereas, this is a BIG line 
 
<br id="biglinebreakid" /> 
 
break! You can use any CSS selectors you want for things like this line 
 
<br class="biglinebreakclass" /> 
 
break!

असल में, बीआर टैग सीएसएस स्टाइल के दुनिया में कुछ शून्य नहीं हैं: वे अभी भी स्टाइल जा सकता है। हालांकि, मैं केवल बीआर टैग शैली के लिए line-height का उपयोग करने की अनुशंसा करता हूं। वे कभी लाइन-ब्रेक से ज्यादा कुछ नहीं होने का इरादा रखते थे, और ऐसे में वे हमेशा किसी अन्य चीज़ के रूप में उपयोग करते समय अपेक्षित काम नहीं कर सकते थे। मार्जिन और पैडिंग जैसी चीज़ों के लिए एक कार्य-आसपास इसके बजाय एक ब्रा के साथ एक अवधि की शैली है।

#paddedlinebreak { 
 
    background: orange; 
 
    line-height: calc(6em + 100%); 
 
    padding: 3em; 
 
}

<div style="outline: 1px solid yellow;margin:1em;display:inline-block;overflow:visible"> 
 
This is a padded line 
 
<span id="paddedlinebreak"><br /></span> 
 
break. 
 
</div>