क्या आप सीएसएस के साथ <br /> को निशाना बना सकते हैं?

Question

क्या <br/>सीएसएस के साथ लाइन-ब्रेक टैग को लक्षित करना संभव है ?

मैं हर बार 1px धराशायी लाइन के लिए लाइन-ब्रेक करना चाहूंगा। मैं अपने खुद के सीएसएस के साथ एक साइट को अनुकूलित कर रहा हूं और सेट HTML को बदल नहीं सकता, अन्यथा मैं किसी अन्य तरीके का उपयोग करूंगा।

मुझे नहीं लगता कि यह संभव है लेकिन हो सकता है कि कोई ऐसा तरीका हो जिसके बारे में कोई जानता हो।

Comments

देखें stackoverflow.com/a/1409742

— पीटर क्रूस

Answer 1

BRएक लाइन-ब्रेक उत्पन्न करता है और यह केवल एक लाइन-ब्रेक है। जैसा कि इस तत्व में कोई सामग्री नहीं है, केवल कुछ शैलियों हैं जो इस पर लागू करने के लिए समझ में आती हैं, जैसे clearया position। आप BRसीमा निर्धारित कर सकते हैं लेकिन आप इसे नहीं देख पाएंगे क्योंकि इसका कोई दृश्य आयाम नहीं है।

यदि आप नेत्रहीन दो वाक्यों को अलग करना पसंद करते हैं, तो आप शायद क्षैतिज शासक का उपयोग करना चाहते हैं जो इस लक्ष्य के लिए अभिप्रेत है। चूंकि आप मार्कअप नहीं बदल सकते हैं, मुझे केवल सीएसएस के उपयोग से डर लगता है कि आप इसे हासिल नहीं कर सकते।

ऐसा लगता है, यह पहले से ही अन्य मंचों पर चर्चा की गई है। Re से निकालें : CSS का उपयोग करके BR तत्व की ऊंचाई निर्धारित करना :

[T] बीआर के लिए उसकी स्थिति कुछ हद तक विषम है क्योंकि एक तरफ उसे सामान्य तत्व के रूप में नहीं माना जा रहा है, बल्कि उत्पन्न सामग्री में \ A के उदाहरण के रूप में है, लेकिन दूसरी तरफ इसे माना जा रहा है उस पर एक सामान्य तत्व (सीएसएस संपत्तियों की एक सीमित सबसेट) उस पर अनुमति दी जा रही है।

मुझे CSS 1 विनिर्देश में एक स्पष्टीकरण मिला (कोई उच्च स्तरीय कल्पना इसका उल्लेख नहीं करती है):

वर्तमान CSS1 गुण और मान 'BR' तत्व के व्यवहार का वर्णन नहीं कर सकते हैं। HTML में, 'BR' तत्व शब्दों के बीच एक लाइन ब्रेक निर्दिष्ट करता है। वास्तव में, तत्व को लाइन ब्रेक द्वारा बदल दिया जाता है। सीएसएस के भविष्य के संस्करणों को जोड़ा और प्रतिस्थापित सामग्री को संभाल सकता है, लेकिन CSS1- आधारित फॉर्मेटर्स को विशेष रूप से 'बीआर' का इलाज करना चाहिए।

ग्रांट वैगनर के परीक्षणों से पता चलता है कि स्टाइल का कोई तरीका नहीं है BRजैसा कि आप अन्य तत्वों के साथ कर सकते हैं। ऑनलाइन एक साइट भी है जहां आप अपने ब्राउज़र में परिणामों का परीक्षण कर सकते हैं ।

अपडेट करें

श्रोणि ने कुछ और जांच की, और बताया कि IE8 (Win7 पर) और क्रोम 2 / सफारी 4 बी आपको BRकुछ हद तक स्टाइल करने की अनुमति देता है । और वास्तव में, मैंने IE नेट रेंडरर के IE8 इंजन के साथ IE डेमो पेज की जाँच की , और यह काम किया।

अपडेट 2 c69 ने कुछ और जांच की, और यह पता चला कि आप मार्कर को काफी भारी (हालांकि, क्रॉस-ब्राउज़र नहीं) स्टाइल कर सकते हैं , फिर भी यह लाइन-ब्रेक को प्रभावित नहीं करेगा, क्योंकि यह मूल कंटेनर से संबंधित है।br

Comments

बहुत बढ़िया जवाब। यदि यह क्रॉस-ब्राउज़र नहीं है, तो इसे स्टाइल करने की कोशिश करने लायक नहीं है जब तक कि आप केवल एक ब्राउज़र को लक्षित नहीं कर रहे हैं (उदाहरण के लिए केवल मोबाइल डिवाइस, शायद)। अन्यथा, स्टाइलिंग की अनुमति देने के लिए अपने HTML को संशोधित करने के लिए समझ में आता है (<p> टैग, किसी को भी?)

— razzed

Answer 2

निम्नलिखित का प्रयास करें, मैंने उच्च वोटों के साथ दूसरे उत्तर से अपडेट 2 का उपयोग करके इसे एक साथ रखा, और इसने मेरे लिए पूरी तरह से काम किया:

br
{   content: "A" !important;
    display: block !important;
    margin-bottom: 1.5em !important;
}

Comments

एज और IE पर काम करना प्रतीत नहीं होता है, लेकिन वे वास्तविक ब्राउज़र नहीं हैं।

— जस्टर

Answer 3

एक अच्छा कारण है कि आपको एक <br>टैग को स्टाइल करने की आवश्यकता होगी ।

जब यह उस कोड का हिस्सा होता है जिसे आप बदलना नहीं चाहते (या नहीं) कर सकते हैं और आप चाहते हैं कि यह विशेष रूप <br>से प्रदर्शित न हो।

.xxx br {display:none}

बहुत समय और कभी-कभी अपने दिन को बचा सकते हैं।

Answer 4

किसी भी भविष्य के आगंतुकों के लाभ के लिए, जो मेरी टिप्पणियों को याद कर सकते हैं:

br {
    border-bottom:1px dashed black;
}

काम नहीं करता।

आईई 6, 7 और 8, फ़ायरफ़ॉक्स 2, 3 और 3.5 बी 4, सफारी 3 और 4 के लिए विंडोज, ओपेरा 9.6 और 10 (अल्फा) और Google क्रोम (संस्करण 2) में परीक्षण किया गया है और यह किसी भी काम नहीं किया उन्हें। यदि भविष्य में किसी बिंदु पर किसी को एक ब्राउज़र मिलता है जो किसी <br>तत्व पर सीमा का समर्थन करता है , तो कृपया इस सूची को अपडेट करने के लिए स्वतंत्र महसूस करें।

यह भी ध्यान दें कि मैंने कई अन्य चीजों की कोशिश की:

br {
    border-bottom:1px dashed black;
    display:block;
}

br:before { /* and :after */
    border-bottom:1px dashed black;
    /* content and display added as per porneL's comment */
    content: "";
    display: block;
}

br { /* and :before and :after */
    content: url(a_dashed_line_image);
}

उन में से, ओपेरा 9.6 और 10 (अल्फा) (धन्यवाद porneL!) में काम करता है।

br:after {
    border-bottom:1px dashed black;
    content: "";
    display: block;
}

बहुत उपयोगी नहीं है जब यह केवल एक ब्राउज़र में समर्थित है, लेकिन मुझे यह देखना हमेशा दिलचस्प लगता है कि विभिन्न ब्राउज़र विनिर्देश कैसे लागू करते हैं।

Comments

: पहले सामग्री के बिना मौजूद नहीं है। content:""; display:blockदूसरे नियम में जोड़ें ।

— कोर्नेल

Answer 5

मुझे पता है कि आप HTML को संपादित नहीं कर सकते, लेकिन यदि आप CSS को संशोधित कर सकते हैं, तो क्या आप जावास्क्रिप्ट जोड़ सकते हैं?

यदि हां, तो आप jquery को शामिल कर सकते हैं, फिर आप कर सकते हैं

<script language="javascript">
$(document).ready(function() {
    $('br').append('<span class="myclass"></span>');
});
</script>

Comments

आप $ ('br') कहना चाहते हैं। पहले ('<span class = "myclass"> </ span>');

— मोलोकोलोको

Answer 6

br { padding: 1px 8px; border-bottom: 1px dashed #000 }

IE8 में नीचे रेंडरर्स ... सिर्फ एक ब्राउज़र में बहुत अधिक उपयोग नहीं है।

(NB मैं IE 8.0.7100 का उपयोग कर रहा हूँ (Win7 RC पर) अगर इससे कोई फर्क पड़ता है)

इसके अलावा,

br:after { content: "..." }  
br { content: "" }`

या,

br:after {
    border: 1px none black;
    border-bottom-style: dashed;
    content: "";
    padding: 0 6px 0;
}

br { content: "" }

Chrome 2 / Safari 4b में धराशायी लाइन देता है, लेकिन लाइन ब्रेक को खो देता है जो (जब तक कि कोई भी इसे फिर से शुरू करने के तरीके के साथ नहीं आ सकता है) इसे बेकार से कम कर देता है।

जैसे
IE8 टेस्ट , क्रोम / सफारी टेस्ट और दूसरा

Comments

यह तो दिलचस्प है। मैं IE8 के तहत इसे पुन: पेश नहीं कर सकता। क्या आप एक उदाहरण ऑनलाइन डाल सकते हैं जो आपके IE8 में आपकी अंतर्निहित छवि के समान दिखता है?

— viam0Zah

लिंक जोड़ा गया - Win7 IE8 के कुछ अलग संस्करण का उपयोग करता है यदि कोई फर्क पड़ता है।

— pelms

@pelms धन्यवाद, मैंने IENetRenderer के साथ IE परीक्षण पृष्ठ की जाँच की और यह वास्तव में सीमा को दर्शाता है BR। धन्यवाद, मैंने आपके परीक्षण परिणामों के साथ अपना उत्तर अपडेट किया।

— viam0Zah

Answer 7

मेरे अपने परीक्षण निर्णायक रूप से दिखाते हैं कि brटैग सीएसएस के लिए लक्षित होना पसंद नहीं करते हैं।

लेकिन अगर आप शैली जोड़ सकते हैं तो आप शायद पृष्ठ के शीर्ष लेख में एक टैग भी जोड़ सकते हैं? किसी बाहरी से लिंक .jsजो कुछ इस तरह करता है:

function replaceLineBreaksWithHorizontalRulesInElement( element )
{
    elems = element.getElementsByTagName( 'br' );
    for ( var i = 0; i < elems.length; i ++ )
    {
        br = elems.item( i );
        hr = document.createElement( 'hr' );
        br.parentNode.replaceChild( hr, br );
    }
}

तो संक्षेप में, यह इष्टतम नहीं है, लेकिन यहां मेरा समाधान है।

Comments

'मैं दुर्भाग्य से html को बदल नहीं सकता' dc3 ने लिखा है।

— viam0Zah

@ Török: मैंने जो उत्तर पोस्ट किया है, वह पूरी तरह से ओपी के लिए नहीं है, लेकिन सभी के लिए कभी भी एक समान प्रश्न वाला यह पृष्ठ नहीं मिला है।

— क्रिस

Answer 8

यह समस्या को हल करने के लिए लगता है:

<!DOCTYPE html>

<style type="text/css">
#someContainer br { display:none }
#someContainer br + a:before { content:"|"; color: transparent; letter-spacing:-100px; border-left: 1px dashed black; margin:0 5px; }
</style>

<div id="someContainer"><a>link</a><br /><a>link</a><br /><a>link</a></div>

Answer 9

बीआर एक इनलाइन तत्व है, एक ब्लॉक तत्व नहीं है।

तो, आप की जरूरत है:

 br.Underline{
    border-bottom:1px dashed black;
    display: block;
  }

अन्यथा, ऐसी चीजों के बारे में थोड़ा सा चयन करने वाले ब्राउज़र आपके BR तत्वों पर सीमाएँ लागू करने से मना कर देंगे, क्योंकि इनलाइन तत्वों में बॉर्डर, पैडिंग या मार्जिन नहीं होते हैं।

Comments

इनलाइन तत्वों करते बॉर्डर, paddings और मार्जिन है - केवल अन्य तरीके से व्यवहार करते हैं।

— viam0Zah

मैं फ़ायरबग के साथ एफएक्स में चीजों की कोशिश कर रहा हूं। मैंने भी कोशिश की थी, लेकिन यह मेरे लिए काम नहीं किया। मैं देखता हूं कि लाइन ब्रेक टैग में स्लैश फ्लोटिंग नहीं है (यदि वह सही शब्दावली है), यानी..इसके बीच br और / के बीच कोई जगह नहीं है। यह एक कारक है। मैंने सोचा था कि एक जगह बनना था। मैंने html को एडिट किया वैसे भी फायरबग में इसे ठीक करने के लिए और अभी भी कुछ भी नहीं। वैसे भी सभी लोगों की मदद के लिए धन्यवाद - इस साइट को पहले कभी इस्तेमाल नहीं किया और मुझे बहुत आश्चर्य है कि मुझे कितनी तेजी से प्रतिक्रिया मिली। महान समुदाय तुम यहाँ मिल गया।

— dc3

@richard: क्या आपने वास्तव में इसका परीक्षण किया है, यदि ऐसा है, तो कौन सा ब्राउज़र? मैंने इसे IE 6, 7 और 8, फ़ायरफ़ॉक्स 2, 3 और 3.5B4, सफारी 3 और 4 के लिए विंडोज, ओपेरा 9.6 और 10 (बीटा) और Google क्रोम (संस्करण 1) में आज़माया और यह उनमें से किसी में भी काम नहीं आया। ।

— ग्रांट वैग्नर

Answer 10

अद्यतन 9/13/2019:

इस <br>तरह टैग को स्टाइल करने का उद्देश्य "बड़ा" लाइन ब्रेक (यानी, लाइनों के बीच थोड़ा अतिरिक्त स्थान के साथ) बनाना है।

"ओल्डबीग" क्लास (नीचे) का परीक्षण किया गया था और शैली में क्रोम 66.0.3359.181, फ़ायरफ़ॉक्स क्वांटम 60.0.2, एज 42.17134.1.0 और IE 11.48.17134.0 पर ठीक से काम किया गया था। दुर्भाग्य से, यह क्रोम संस्करण 76 और इसके डेरिवेटिव (लगभग अगस्त 2019) में टूट गया। लक्षण यह है कि लाइनों के बीच अतिरिक्त स्थान अब प्रदर्शित नहीं होता है।

"Newbig" वर्ग क्रोम के वर्तमान संस्करणों (76.0.3809.132), ओपेरा, फ़ायरफ़ॉक्स, एज, IE, ब्रेव और पालमून में ठीक से परीक्षण और काम कर रहा है:

br.oldbig {line-height:190%;vertical-align:top;}
br.newbig {display:block;content:"";margin-top:0.5em;line-height:190%;vertical-align:top;}

यहाँ एक डेमो है:

br.oldbig {line-height:175%;vertical-align:top;}
br.newbig {display:block;content:"";margin-top:0.5em;line-height:190%;vertical-align:top;}

<p style="max-width:20em">This is a paragraph which demonstrates the difference 
 between a line-break which occurs when the text exceeds the max-width, and a 
 line-break forced by a &lt;br&gt; tag here:<br>
 and a line break forced by a &lt;br class=oldbig&gt; tag here:<br class=oldbig>
 and a line break forced by a &lt;br class=newbig&gt; tag here:<br class=newbig>
 This is the next line after the &lt;br class=newbig&gt; tag (but still 
 part of the same paragraph).</p>
<p style="max-width:20em">And this is another paragraph, entirely.</p>

यह परिणाम है, क्रोम v.76 में प्रदर्शित:

Answer 11

यह काम करेगा, लेकिन केवल IE में। मैंने IE8 में इसका परीक्षण किया।

br {

  border-bottom: 1px dashed #000000;
  background-color: #ffffff;
  display: block;
  }

Answer 12

मैंने एक <br>टैग को टैग में रखा <span>और मीडिया क्वैरी का उपयोग करके टैग का उपयोग न करने display:none;के <span>लिए नियंत्रण पर उपयोग करने में सक्षम था <br>।

Comments

<br>एक स्पैन में इसे लपेटने के बजाय सीधे क्यों नहीं लक्षित करें ?

— गेविन

Answer 13

पुराना सवाल है, लेकिन यह एक बहुत साफ और स्वच्छ है, उन लोगों के लिए उपयोग में आ सकता है जो अभी भी सोच रहे हैं कि क्या यह संभव है :):

br{
    content: '.';
    display: inline-block;
    width: 100%;
    border-bottom: 1px dashed black;
}

इस फिक्स के साथ आप वेबसाइटों पर बीआर को भी हटा सकते हैं (बस 0px की चौड़ाई सेट करें)

Answer 14

सिर्फ एचआर टैग का उपयोग क्यों नहीं? यह वास्तव में आप क्या चाहते हैं के लिए बनाया गया है। जब आप टेबल पर आपके सामने एक चम्मच हो तो सूप खाने के लिए कांटा बनाने की कोशिश करना पसंद करते हैं।

Comments

सभी उपयोग के मामलों के लिए काम नहीं करता है क्योंकि घंटा एक ब्लॉक तत्व है - इसके लिए स्टाइल सीमित है

— Thariama

स्पष्ट रूप से वह स्पष्ट उपयोग करना चाहता है: सभी, गैबर के उत्कृष्ट उत्तर को देखें। तो आपका कांटा रूपक कोई मतलब नहीं रखता है।

— eddy147