सीएसएस के साथ उपेक्षा?

Question

मैं एक ऐसी साइट पर काम कर रहा हूँ जिसमें <br>कुछ शीर्षकों की तरह लाइन ब्रेक सम्मिलित हैं । यह मानते हुए कि मैं स्रोत HTML को संपादित नहीं कर सकता, क्या सीएसएस के साथ कोई रास्ता है जिससे मैं इन विरामों को अनदेखा कर सकता हूँ?

मैं मोबाइल को साइट का अनुकूलन कर रहा हूं इसलिए मैं वास्तव में जावास्क्रिप्ट का उपयोग नहीं करना चाहता।

Comments

@Ben Johnson mk2: आपके सवाल का जवाब: "मैं फ़ायरफ़ॉक्स और ओपेरा के लिए @Aneesh कार्तिक सी का जवाब चाहता हूं", यह brतत्वों के उपयोग के साथ संभव नहीं है ! कारणों को पहले से ही कई बार समझाया गया है! अपने जवाब में, मैंने आपको वैध, मजबूत और क्रॉस ब्राउज़र तरीके से लक्ष्य प्राप्त करने के लिए एक वैकल्पिक तरीका दिखाया।

— नेट्सफर

Answer 1

सीएसएस के साथ, आप ब्रा टैग को "छिपा" सकते हैं और उनका कोई प्रभाव नहीं पड़ेगा:

br {
    display: none;
}

यदि आप केवल एक विशिष्ट शीर्षक प्रकार के भीतर कुछ छिपाना चाहते हैं, तो बस अपने सीएसएस को अधिक विशिष्ट बनाएं।

h3 br {
    display: none;
}

Comments

अनीश के जवाब पर भी एक नज़र रखना सुनिश्चित करें, यह प्रासंगिक है और एक समस्या को ठीक करता है जो एनोब्रेव ने अपने विचार में नहीं किया था।

— रिक काल्डर

सहमत, अनीश का जवाब शानदार है। stackoverflow.com/a/18040142/14651

— enobrev

यह समाधान फ़ायरफ़ॉक्स के लिए काम नहीं करता है। अगर <br/> के आसपास जगह नहीं है, तो यह <br/> शब्दों को एक साथ जोड़ देता है। यहाँ नमूना है आप इसके बारे में चर्चा नीचे

— shinesecret

यदि आपका लक्ष्य उत्तरदायी डिज़ाइन है, तो एकमात्र क्रॉस-ब्राउज़र समाधान @ नेटसर्फर है। यह उस प्रश्न का उत्तर नहीं देता जैसा कि कहा गया है, लेकिन यह सभी आधुनिक ब्राउज़रों में लक्ष्य को प्राप्त करता है।

— एंड्रयू लुंडिन

Answer 2

नोट: यह समाधान केवल वेबकिट ब्राउज़र के लिए काम करता है, जो गलत तरीके से छद्म तत्वों को स्व-समापन टैग पर लागू करता है।

उपरोक्त उत्तरों के परिशिष्ट के रूप में यह ध्यान देने योग्य है कि कुछ मामलों में किसी को केवल अनदेखी करने के बजाय एक स्थान सम्मिलित करने की आवश्यकता होती है <br>:

उदाहरण के लिए उपरोक्त उत्तर बदल जाएंगे

Monday<br>05 August

सेवा

Monday05 August

जैसा कि मैंने सत्यापित किया था जब मैंने अपने साप्ताहिक ईवेंट कैलेंडर को प्रारूपित करने का प्रयास किया था। "सोमवार" के बाद एक स्थान डाला जाना पसंद किया जाता है। इसे सीएसएस में निम्नलिखित सम्मिलित करके आसानी से किया जा सकता है:

br  {
    content: ' '
}
br:after {
    content: ' '
}

यह बना देगा

Monday<br>05 August

हमशक्ल

Monday 05 August

आप बदल सकते हैं contentमें विशेषता br:afterके ', 'अगर आप अल्पविराम के द्वारा अलग, या कुछ भी आप के भीतर चाहते रखना चाहते हैं ' 'यह सीमांकक बनाने के लिए! वैसे

Monday, 05 August

साफ दिखता है ;-)

एक संदर्भ के लिए यहां देखें ।

जैसा कि उपरोक्त उत्तरों में, यदि आप इसे टैग-विशिष्ट बनाना चाहते हैं, तो आप कर सकते हैं। जैसे कि यदि आप चाहते हैं कि यह संपत्ति टैग के लिए काम करे , तो उदाहरण के लिए, प्रत्येक को पहले <h3>जोड़ें और ।h3brbr:after

यह एक छद्म टैग के लिए सबसे आम तौर पर काम करता है।

Comments

बहुत बहुत प्रतिभाशाली!

— जों

ठीक है, वास्तव में इसे अक्षम करने के परिणामों के बारे में सोच!

— रिक कैल्डर

अच्छी बात है, लेकिन यह फ़ायरफ़ॉक्स और IE के साथ केवल वेबकिट ब्राउज़र (क्रोम और सफारी) के साथ काम करने लगता है। यह तकनीक काम नहीं करती है, फ़ायरफ़ॉक्स और IE के साथ jsfiddle.net/nicooprat/ZHxNA की जाँच करें ... किसी भी विचार कैसे एक br को बदलने के लिए एक स्थान के साथ ताकि यह सभी मुख्य ब्रोवर्स के साथ काम करे?

— 5

@firepol: वास्तव में, फ़ायरफ़ॉक्स और IE चीजों को "सही" कर रहे हैं क्योंकि <br />यह एक ऐसा तत्व है जिस पर छद्म तत्व काम करने वाला नहीं है । और contentकेवल छद्म तत्वों पर काम करता है।

— स्कॉट्स

यह बहुत गलत समाधान है, मुख्य रूप से पहले से ही लिखे गए @ScottS का bcause। "सामग्री" केवल छद्म तत्वों के साथ काम करने वाली है, और छद्म तत्व को स्वयं समापन टैग के साथ काम करने के लिए नहीं माना जाता है। यह अभी के लिए काम कर सकता है, लेकिन मैं इस समाधान को भविष्य का प्रमाण कहने की हिम्मत नहीं करूंगा।

— nd_macias

Answer 3

यदि आप शैली में जोड़ते हैं

br{
    display: none;
}

फिर यह काम करेगा। यकीन नहीं है कि अगर यह IE के पुराने संस्करणों में काम करेगा।

Comments

यह पहले पोस्ट किया गया था और कम वोट थे .. कैसे आए?

— Mr_Green

कभी-कभी, हमें बस अनदेखा कर दिया जाता है;

— टिम बी जेम्स

@TimBJames यह FIREFOX में काम नहीं करता है आप ऊपर

— shinesecret

Answer 4

यह मेरा इसे करने का तरीका है:

br { 
    display: inline;
    content: ' ';
    clear:none;
}

Answer 5

यदि आप श्वेत स्थान विधि को काम करना चाहते हैं span, brतो आप इसके बजाय तत्वों का उपयोग कर सकते हैं , क्योंकि यह छद्म तत्वों पर निर्भर करता है जो प्रतिस्थापित तत्वों के लिए "परिभाषित नहीं" हैं।

एचटीएमएल

<p>
   To break lines<span class="line-break">in a paragraph,</span><span>don't use</span><span>the 'br' element.</span>
</p>

सीएसएस

span {white-space: pre;}

span:after {content: ' ';}

span.line-break {display: block;}

span.line-break:after {content: none;}

डेमो

लाइन ब्रेक केवल उपयुक्त स्पैन तत्व को सेट करके प्राप्त किया जाता है display:block।

अपने HTML मार्कअप में आईडी और / या कक्षाओं का उपयोग करके आप आसानी से सीएसएस द्वारा हर एक या स्पैन तत्वों के संयोजन को लक्षित कर सकते हैं या सीएसएस चयनकर्ताओं का उपयोग कर सकते हैं nth-child()।

इसलिए आप एक संवेदनशील लेआउट के लिए मीडिया प्रश्नों का उपयोग करके विभिन्न ब्रेक पॉइंट को परिभाषित कर सकते हैं।

और आप जावास्क्रिप्ट क्लासेस (jQuery) द्वारा केवल क्लास जोड़ / हटा सकते हैं।

इस पद्धति का "लाभ" इसकी मजबूती है - प्रत्येक ब्राउज़र में काम करता है जो छद्म तत्वों का समर्थन करता है (देखें: क्या मैं उपयोग कर सकता हूं - सीएसएस उत्पन्न सामग्री )।

एक विकल्प के रूप में छद्म तत्वों के माध्यम से एक पंक्ति विराम जोड़ना भी संभव है:

span.break:before {  
    content: "\A";
    white-space: pre;
}

डेमो

Comments

क्या आपको इस प्रश्न का हिस्सा याद आया: "मान लें कि मैं स्रोत html संपादित नहीं कर सकता"?

— स्कॉट्स

@ सॉट्स: नहीं, मैंने नहीं किया। हो सकता है कि आप इस भाग से चूक गए हों: 'मैं फ़ायरफ़ॉक्स और ओपेरा के लिए @Aneesh कार्तिक सी के जवाब का समाधान चाहूंगा' (जैसा कि जिसने बाउंटी शुरू की वह ओपी नहीं है)। और इसका उत्तर यह है, कि यह संभव नहीं है <br>, कम से कम क्रॉस-ब्राउज़र नहीं। इसलिए मैंने एक विकल्प दिखाया।

— नेट्सफर

नहीं, मुझे वह हिस्सा याद नहीं था (जो ओपी इनाम से अलग है और अनीश के जवाब पर ध्यान केंद्रित करता है)। लेकिन अनीश का जवाब पूरे सवाल के संदर्भ में है, "सीएसएस के साथ <br> पर ध्यान न दें?" यह बल्कि स्पष्ट है कि अगर एक एचटीएमएल की वास्तविक नियंत्रण नहीं है, तो बस लगता है को हटाने<br> तत्वों मुद्दा (संभवतः उन्हें रिक्त स्थान के साथ की जगह) को हल करती है। तो पूरा मुद्दा जिसके साथ एक पूरे के रूप में सवाल यह है कि जब किसी के पास html का नियंत्रण नहीं है ; अतिरिक्त वजीफा द्वारा जटिल कि वे वास्तव में इसे हल करने के लिए जावास्क्रिप्ट (जो भी कारण के लिए) का उपयोग नहीं करना चाहते थे।

— स्कॉट्स

सवाल " <br>सीएसएस के साथ उपेक्षा कैसे करें ?" पहले ही जवाब दे दिया गया था। और केवल अगर आप HTML के नियंत्रण में हैं जिसका मतलब यह नहीं है, कि आप इसे बदलना चाहते हैं। लेकिन उत्तरदायी डिजाइन में अक्सर लाइन ब्रेक (स्वचालित आवरण के अलावा) के नियंत्रण में होना वांछनीय है। और ऐसे मामलों में लक्ष्य प्राप्त करने के लिए सीएसएस (मीडिया प्रश्नों) द्वारा सफेद स्थान रखने या नियंत्रित नहीं करने की विधि कम से कम "एक विधि" है।

— नेट्सफर 19

इसने मेरे लिए अब बेहतर काम किया कि उपरोक्त समाधान अब फ़ायरफ़ॉक्स में काम नहीं करते हैं।

— क्रिस्टोस हर्सिस

Answer 6

मेरे लिए इस तरह बेहतर है:

Some text, Some text, Some text

br {
  display: inline;
  content: '';
}

br:after {
  content: ', ';
  display: inline-block;
}

<div style="display:block">
  <span>Some text</span>
  <br>
  <span>Some text</span>
  <br>
  <span>Some text</span>
</div>

Answer 7

उसके लिए आप बस इस तरह कर सकते हैं:

br{display: none;}

और यदि यह कुछ PRE टैग के अंदर है, तो आप कर सकते हैं और यदि आप चाहते हैं कि PRE टैग एक नियमित ब्लॉक तत्व की तरह व्यवहार करे, तो आप इस CSS का उपयोग कर सकते हैं:

pre {white-space: normal;}

या आप अनीश कार्तिक सी की शैली का अनुसरण कर सकते हैं जैसे:

br  {content: ' '}
br:after {content: ' '}

मुझे लगता है कि आपको मिल गया

Comments

मैं तुम्हें मुद्दा यह है कि छद्म तत्वों की तरह याद किया लगता है ::beforeऔर ::afterकर रहे हैं कम से कम "प्रतिस्थापित तत्वों" की तरह के लिए "अपरिभाषित" br। तो एक सुसंगत ब्राउज़र व्यवहार कभी नहीं होगा जिस पर कोई भरोसा कर सकता है! केवल एक चीज आप कर सकते हैं, इन तत्वों के साथ छद्म तत्वों का उपयोग नहीं करना है !

— नेट्सफर

Answer 8

आपके सवाल के अनुसार, अनीश कार्तिक सी दृष्टिकोण का उपयोग करके फ़ायरफ़ॉक्स और ओपेरा के लिए इस समस्या को हल करने के लिए आपको "फ्लोट" सही "विशेषता" जोड़ने की आवश्यकता है।

यहां उदाहरण देखें । यह सीएसएस फ़ायरफ़ॉक्स (26.0), ओपेरा (12.15), क्रोम (32.0.1700) और सफारी (7.0) में काम करता है

br {
   content: " ";  
   float:right; 
}

मुझे उम्मीद है कि यह आपके सवाल का जवाब देगा !!

Comments

सामग्री की संपत्ति का केवल CSS छद्म तत्वों पर प्रभाव है। तो यह आपके डेमो में बिल्कुल बेकार है! और कैसे "बेअसर" करने के लिए एक brपहले से ही उत्तर दिया गया है (एक से अधिक बार)। प्रश्न सशर्त सफेद स्थान के बारे में है । और चूंकि इसमें छद्म तत्वों के उपयोग की आवश्यकता होती है, इसलिए यह काम नहीं करता हैbr ।

— नेट्सफर

यदि आप प्रश्न को ध्यान से पढ़ते हैं। आप जवाब समझ जाएंगे। मैंने ऊपर दिए गए उत्तर को देखा है जो कि केवल इसे प्रदर्शित करने के लिए सेटिंग से बचने के लिए सबसे अच्छा है: कोई नहीं। लेकिन दूसरे प्रश्न के अनुसार वह यह जानना चाहता है कि अनीश समाधान के लिए एफएफ और ओपेरा में आने वाले मुद्दे को कैसे संबोधित कर सकता है।

— shinesecret

मैंने केवल प्रश्न ही नहीं, बल्कि सभी उत्तरों और टिप्पणियों को भी बहुत ध्यान से पढ़ा है। के लिए सामग्री संपत्ति brबस बकवास है! और मैं अभी भी यह नहीं देख सकता कि आपके शेष उत्तर का "सशर्त श्वेत स्थान और लाइन ट्रेकस" के साथ क्या संबंध है? शायद आप इसे और अधिक समझा सकते हैं, कृपया?

— नेट्सफर

आपका उदाहरण भ्रामक है, क्योंकि आपके पास brतत्वों के आसपास पहले से ही रिक्त स्थान हैं। यदि आप उन्हें हटाते हैं, तो आप देखेंगे कि यह किसी स्थान को जोड़ने के लिए काम नहीं कर रहा है।

— स्कॉट्स

आपके उदाहरण में आपके पास तीन brतत्व हैं, पहले और अंतिम एक से पहले और बाद के रिक्त स्थान के साथ। यह वे स्थान हैं जो यह प्रकट करते हैं कि आपका समाधान काम कर रहा है, जब वास्तव में यह नहीं है। जब आप उन स्थानों को हटाते हैं, जैसा कि मैंने अपने संशोधित उदाहरण में किया था, तो आप देख सकते हैं कि आपका समाधान फ़ायरफ़ॉक्स में बिल्कुल भी जगह नहीं जोड़ रहा है।

— 14

Answer 9

हालांकि यह प्रश्न पहले से ही हल हो गया प्रतीत होता है, स्वीकृत उत्तर फ़ायरफ़ॉक्स पर मेरे लिए समस्या का समाधान नहीं करता है। फ़ायरफ़ॉक्स (और संभवतः IE, हालांकि मैंने कोशिश नहीं की है) "सामग्री" टैग की सामग्री को पढ़ते हुए व्हाट्सएप छोड़ें। जबकि मैं पूरी तरह से समझता हूं कि मोज़िला ऐसा क्यों करेगा, यह समस्याओं का हिस्सा लाता है। मुझे सबसे आसान वर्कअराउंड नियमित रूप से नॉन-ब्रेक करने योग्य रिक्त स्थान का उपयोग करना था जैसा कि नीचे दिखाया गया है।

.noLineBreaks br:before{
content: '\a0'
}

एक नजर है ।

Comments

आपके फिडल में beforeए पर तत्व क्यों नहीं है br? तुम भी brअपने HTML में बेला पर नहीं है। समस्या का एक हिस्सा यह है कि कुछ ब्राउज़रों में beforeकाम नहीं करता brहै।

— स्कॉट्स

यह काफी अपेक्षित व्यवहार है, जैसा कि कल्पना में कहा गया है: 2.5.1 आम पार्सर मुहावरे

— नेट्सफर

Tha निश्चित रूप से अजीब है, यह तब काम करता है जब मैं इसे अपनी परियोजना में लागू करता हूं। मेरा पाठ सभी HTML नहीं है, हालाँकि, मैं जो सामग्री बदल रहा हूं वह डेटाबेस से आती है। क्षमा करें, मेरी अन्वेषक ने तब मदद नहीं की।

— संतो गुरुवर

Answer 10

हाँ आप इसे अनदेखा कर सकते हैं <br>। आपको विशेष रूप से उत्तरदायी डिजाइन के मामले में इसकी आवश्यकता हो सकती है जहां आपको मोबाइल उपकरणों के लिए ब्रेक निकालने की आवश्यकता होती है।

एचटीएमएल

<h2>

  Where ever you go <br class="break"> i am there.

</h2>

मोबाइल उदाहरण के लिए सीएसएस

/* Resize the browser window to check */

@media (max-width: 640px) 
{
  .break {display: none;}
}

इस कोडपेन को देखें:
https://codepen.io/fluidbrush/pen/pojGQyM

Answer 11

आप इसे टिप्पणी में बदल सकते हैं।

या आप यह कर सकते हैं:

br {
display: none;
}

लेकिन अगर आप यह नहीं चाहते हैं कि आप वहां क्यों डाल रहे हैं?