HTML तत्वों के बीच लाइन ब्रेक से बचें

109

मेरे पास यह <td>तत्व है:

<td><i class="flag-bfh-ES"></i>&nbsp;+34&nbsp;666&nbsp;66&nbsp;66&nbsp;66</td>

मैं इसे एक ही पंक्ति में रखने की उम्मीद कर रहा था, लेकिन यह वही है जो मुझे मिलता है:

यहां छवि विवरण दर्ज करें

जैसा कि आप देख सकते हैं, झंडा और टेलीफोन नंबर अलग-अलग लाइनों में हैं।  टेलीफोन नंबर की संख्या के बीच में काम कर रहे हैं, लेकिन झंडा और टेलीफोन नंबर के बीच नहीं।

मैं यह कैसे सुनिश्चित कर सकता हूं कि रेंडरर द्वारा कोई भी लाइन-ब्रेक शुरू नहीं किया गया है।

html whitespace

— blueFast
स्रोत

144

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

सबसे मजबूत विकल्प nobrमार्कअप का उपयोग करना है , जो गैर-मानक है, लेकिन सार्वभौमिक रूप से समर्थित है और सीएसएस अक्षम होने पर भी काम करता है:

<td><nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</nobr></td>

(आप  इस मामले में रिक्त स्थान के बजाय उपयोग कर सकते हैं, लेकिन आवश्यकता नहीं है।)

एक अन्य तरीका nowrapविशेषता है (पदावनत / अप्रचलित, लेकिन अभी भी ठीक काम कर रहा है, कुछ दुर्लभ quirks को छोड़कर):

<td nowrap><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

फिर सीएसएस तरीका है, जो सीएसएस सक्षम ब्राउज़र में काम करता है और थोड़ा अधिक कोड की आवश्यकता होती है:

<style>
.nobr { white-space: nowrap }
</style>
...
<td class=nobr><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

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

16

पुन: nobr, mozilla ने चेतावनी दी "यह सुविधा गैर-मानक है और एक मानक ट्रैक पर नहीं है। वेब के सामने आने वाले उत्पादन साइटों पर इसका उपयोग न करें: यह हर उपयोगकर्ता के लिए काम नहीं करेगा। कार्यान्वयन के बीच बड़ी असंगतताएं भी हो सकती हैं। भविष्य में व्यवहार बदल सकता है। ” - developer.mozilla.org/en-US/docs/Web/HTML/Element/nobr

— ल्यूक

1

@ ल्यूक, यह एक "मानक" चेतावनी है। वे किसी भी असंगतता (यहां तक कि एक छोटे से) का वर्णन नहीं करते हैं और किसी भी ब्राउज़र का उल्लेख नहीं करते हैं जो समर्थन नहीं करता है nobr; कोई नहीं है।

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

23

nobrटैग का उपयोग कर के रूप में एक ही श्रेणी में है blink: w3.org/TR/html5/obsolete.html#obsolete या तो आप वेब मानकों की दिशा में काम या आप एक अराजक वेब की दिशा में कार्य। चुनना आपको है।

— ल्यूक

8

यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं, तो एक वर्ग "टेक्स्ट-नॉर्प" पहले से ही परिभाषित है जो स्टाइप को तदनुसार सेट करता है।

— रात १३:१५ बजे रात १३:१५

4

@ JukkaK.Korpela, HTML5 को अब अंतिम रूप दिया गया है और बहुत ही आश्चर्यजनक रूप से, nobrअभी भी हटा दिया गया है और "इसका उपयोग नहीं किया जाना चाहिए" ।

— मार्कस

57

उस td के लिए CSS: white-space: nowrap;इसे हल करना चाहिए।

— tcak
स्रोत

7

यदि आपको कई शब्दों या तत्वों के लिए इसकी आवश्यकता है, लेकिन इसे पूरे TD या समान पर लागू नहीं किया जा सकता है, तो स्पैन टैग का उपयोग किया जा सकता है।

<span style="white-space: nowrap">Text to break together</span>
    or 
<span class=nobr>Text to break together</span>

यदि आप वर्ग संस्करण का उपयोग करते हैं, तो स्वीकृत उत्तर में सीएसएस को विस्तृत रूप में सेट करना याद रखें।

— ग्रेग लिटिल
स्रोत

2

यदि <i>टैग को ब्लॉक के रूप में प्रदर्शित नहीं किया जाता है और प्रोबेलम का कारण बनता है तो यह काम करना चाहिए:

<td style="white-space:nowrap;"><i class="flag-bfh-ES"></i> +34 666 66 66 66</td>

— ameagher
स्रोत

2

कुछ मामलों में (उदाहरण के लिए html जावास्क्रिप्ट द्वारा उत्पन्न और सम्मिलित किया गया) आप एक शून्य चौड़ाई योजक सम्मिलित करने का प्रयास करना चाहते हैं:

.wrapper{
  width: 290px;   
  white-space: no-wrap;
  resize:both;
  overflow:auto; 
  border: 1px solid gray;
}

.breakable-text{
  display: inline;
  white-space: no-wrap;
}

.no-break-before {
  padding-left: 10px;
}

<div class="wrapper">
<span class="breakable-text">Lorem dorem tralalalala LAST_WORDS</span>&#8205;<span class="no-break-before">TOGETHER</span>
</div>

स्निपेट का विस्तार करें

— ह्यूगो डेर हुनग्रीगे
स्रोत

2

यह वास्तविक समाधान है:

<td>
  <span class="inline-flag">
    <i class="flag-bfh-ES"></i> 
    <span>+34 666 66 66 66</span>
  </span>
</td>

सीएसएस:

.inline-flag {
   position: relative;
   display: inline;
   line-height: 14px; /* play with this */
}

.inline-flag > i {
   position: absolute;
   display: block;
   top: -1px; /* play with this */
}

.inline-flag > span {
   margin-left: 18px; /* play with this */
}

उदाहरण, चित्र जो पाठ से पहले हमेशा:

— एंड्री इज़मैन
स्रोत

-1

nobr बहुत अविश्वसनीय है, तालिकाओं का उपयोग करें

<table>
      <tr>
          <td> something </td>
          <td> something </td>
      </tr>
</table>

यह सब एक ही पंक्ति में चलता है, प्रत्येक चीज प्रत्येक स्तर के साथ होती है, और यदि आप बाद में कुछ बदलना चाहते हैं तो आपको बहुत अधिक स्वतंत्रता है।

— एरिक Österling
स्रोत