"& Nbsp;" में क्या अंतर है तथा " "?


146

दोनों का मतलब अंतरिक्ष है, लेकिन क्या कोई अंतर है?

जवाबों:


195

एक नॉन-ब्रेकिंग स्पेस है और दूसरा रेगुलर स्पेस है। एक गैर-ब्रेकिंग स्पेस का मतलब है कि लाइन को उस बिंदु पर नहीं लपेटना चाहिए, जैसे यह एक शब्द के बीच में लपेटा नहीं जाएगा।

इसके अलावा, जैसा कि स्वेंड ने अपनी टिप्पणी में बताया है, गैर-ब्रेकिंग रिक्त स्थान ढह नहीं रहे हैं।


42
& nbsp; गैर-ढहने वाले भी हैं, यह संभवतः उनके उपयोग का सबसे महत्वपूर्ण पहलू है (कम से कम, यही है कि मैं उनका उपयोग कैसे करता हूं, पैड सामान बाहर, त्वरित और आसान)
Svend 31'09

48
Protip: कृपया कुछ करने के लिए पंक्ति में 15% nbsp का उपयोग न करें। जब मैं लोगों को ऐसा करते देखता हूं तो मुझे पागल कर देता है। CSS पैडिंग या मार्जिन का उपयोग करें।
मैथ्यू रपाती

6
यह मुझे पागल कर देता है जब मैं माइक्रोसॉफ्ट वर्ड को देख रहा हूं, वह भी ...
जोश ली

@ अमरघोष: बस मैं हमेशा से ही गुरु बनना चाहता था ... :)
ब्रायन रासमुसेन

1
रिक्ति संस्थाओं के अन्य आकार भी हैं, जैसे &hairsp      आप [ jsfiddle.net/medmunds/4crt3c9j/]
मार्क गावगन

70

इकाई  एक गैर-ब्रेकिंग स्पेस का उत्पादन करती है, जिसका उपयोग तब किया जाता है जब आप उस स्थिति में एक स्वचालित लाइन ब्रेक नहीं चाहते हैं। रेग्युलर स्पेस में कैरेक्टर कोड 32 होता है, जबकि नॉन-ब्रेकिंग स्पेस में कैरेक्टर कोड 160 होता है।

उदाहरण के लिए जब आप हजारों विभाजक के रूप में अंतरिक्ष के साथ संख्याएँ प्रदर्शित करते हैं: 1 234 567, तब आप गैर-ब्रेकिंग रिक्त स्थान का उपयोग करते हैं ताकि संख्या को अलग-अलग रेखाओं पर विभाजित न किया जा सके। यदि आप मुद्रा प्रदर्शित करते हैं और राशि और मुद्रा के बीच एक स्थान है: 42 SEK, तो आप एक गैर-ब्रेकिंग स्पेस का उपयोग करते हैं ताकि आपको एक पंक्ति में राशि और अगली पर मुद्रा न मिले।


3
Nbsp उपयोग के अच्छे उदाहरण। मैं खुद कुछ ढूंढ रहा था, लेकिन उनके बारे में सोच भी नहीं सकता था।
पीट

48

यहां अन्य उत्तरों के अलावा, गैर-ब्रेकिंग स्पेस नियमित रिक्त स्थान की तरह "ध्वस्त" नहीं होंगे। उदाहरण के लिए, दोनों

<p>Word1          Word2</p>

तथा

<p>Word1 Word2</p>

जबकि किसी भी ब्राउज़र पर एक ही प्रस्तुत करना होगा

<p>Word1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Word2</p>

जब रिक्त स्थान प्रदान करेगा।


नहीं, तब मैंने & amp; भर। उसने & amp की व्याख्या नहीं की, लेकिन उसने & nbsp की व्याख्या की।
ग्रीम पेरो

34

उदाहरण के रूप में एक जवाब नहीं ...

उदाहरण 1:

<div style="width:45px; height:45px; border: solid thin red; overflow: visible">
    Hello&nbsp;There
</div>  

उदाहरण # 2:

<div style="width:45px; height:45px; border: solid thin red; overflow: visible">
    Hello There
</div>

और फिडल से लिंक करें ।


3
IMHO के अन्य उत्तरों पर ध्यान देने की आवश्यकता नहीं है। 9 साल, फिर भी मान्य।
Snr

10

आप यहां एक कार्यशील उदाहरण देख सकते हैं:

http://codepen.io/anon/pen/GJzBxo

तथा

http://codepen.io/anon/pen/LVqBQo

एक ही div, एक ही पाठ, विभिन्न "रिक्त स्थान"

<div style="width: 500px; background: red"> [loooong text with spaces]</div>

बनाम

<div style="width: 500px; background: red"> [loooong text with &nbsp;]</div>

क्या आप कृपया मुझे समझा सकते हैं, इस उत्तर को क्यों नकारते हैं?
अलबर्टो-बोटारिनी 11

मैंने इसे अपडाउन किया है। मुझे लगता है कि यह चीजों की व्याख्या नहीं करता है। हालाँकि आप कुछ दृश्य को इंगित कर रहे हैं जो उपयोगी है।
निशांत

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

6

एकाधिक सामान्य सफेद स्थान वर्ण (स्थान, सारणीबद्ध और पंक्ति विराम) को एक ही सफेद स्थान वर्ण के रूप में माना जाता है :

सिवाय सभी HTML तत्वों के PRE, सफेद स्थान के अनुक्रम "शब्दों" को अलग करते हैं (हम "गैर-सफेद अंतरिक्ष वर्णों के अनुक्रम" का अर्थ यहां "शब्द" शब्द से करते हैं)। पाठ को प्रारूपित करते समय, उपयोगकर्ता एजेंटों को इन शब्दों को पहचानना चाहिए और उन्हें विशेष लिखित भाषा (स्क्रिप्ट) और लक्ष्य माध्यम की परंपराओं के अनुसार रखना चाहिए।

इसलिए

foo    bar

के रूप में प्रदर्शित किया जाता है

foo bar

लेकिन नो-ब्रेक स्पेस हमेशा प्रदर्शित होता है। इसलिए

foo&‍nbsp;&‍nbsp;&‍nbsp;bar

के रूप में प्रदर्शित किया जाता है

foo   bar

5

जैसा कि पहले ही उल्लेख किया गया है, आपको एक लाइन ब्रेक नहीं मिलेगा जहां "नो-ब्रेक स्पेस" है।

यह भी सावधान रहें, कि केवल "" वाले तत्व गलत तरीके से प्रदर्शित हो सकते हैं, जहां & nbsp; काम करेगा। यानी 6 में कम से कम (जहां तक ​​मुझे याद है, IE7 में एक ही मुद्दा है), यदि आपके पास एक खाली तालिका तत्व है, तो यह स्टाइल लागू नहीं होगा, उदाहरण के लिए, सीमा के तत्व तक, अगर कोई सामग्री नहीं है, या केवल सफेद है अंतरिक्ष। तो निम्नलिखित सीमाओं के साथ प्रदान नहीं किया जाएगा:

<td></td>
<td> <td>

जबकि सीमाएँ इस उदाहरण में दिखाई देंगी:

<td>& nbsp;</td>

Hmm -had एक डमी अंतरिक्ष में डाल करने के लिए इसे सही ढंग से यहाँ प्रस्तुत करने के लिए


@ स्टीवर्ट - मैंने amp के साथ कोशिश की, और इसने पाठ में काम किया, लेकिन कोड एक्समप्ले में नहीं - क्योंकि इसमें "amp" भाग भी लिखा था
पीट

बहुत अजीब। जाहिर है एक बग।
स्टीवर्ट

2

पहला HTML पार्सर द्वारा सफेद स्थान के रूप में नहीं माना जाता है, दूसरा है। परिणामस्वरूप "" कुछ एचटीएमएल मार्कअप के भीतर शोअप की गारंटी नहीं है, जबकि गैर-टूटने योग्य स्थान हमेशा दिखाई देगा।


1

&nbsp; एक व्हाट्सएप के रूप में संभाला जाना चाहिए।

&nbsp;&nbsp; दो व्हाट्सएप के रूप में संभाला जाना चाहिए

'' को एक गैर दिलचस्प व्हाट्सएप के रूप में संभाला जा सकता है

'' + '' को एकल के रूप में संभाला जा सकता है ''


1

&nbsp; स्टैकेबल है, जिसका अर्थ है कि आप एक साथ कई स्पेस बना सकते हैं।

HTML केवल एक स्थान को पार्स करेगा 'और यह बाकी को छोड़ देता है ...

यदि आप पाँच स्थान चाहते हैं, तो आप 5 x स्थान रखेंगे &nbsp;


0

@Zoidberg सही है, उदाहरण:

<h1>title</h1> <h2>date</h2>

हेडर मार्कअप के बीच जगह नहीं दिखाएगा

& nbsp ; 

अंतरिक्ष करेंगे :)


0

लाइन-ब्रेक होने पर, जब आप $ bnsp का उपयोग करेंगे तो लाइन नहीं टूटेगी; क्योंकि यह एक 'नॉन-ब्रेकिंग स्पेस' है। यह महत्वपूर्ण हो सकता है यदि आपके पास कुछ उत्पाद-नाम या ऐसे हैं, जो हमेशा एक साथ लिखे जाएंगे।

दिलचस्प हो सकता है यदि आप (है) 12344567 की तरह, संख्या में सीमांकक के रूप में एक व्हाट्सएप का उपयोग करते हैं, जो कि फ्रांस में 12 344 567 प्रदर्शित होता है। रेखा के बिना संख्या बहुत ही बदसूरत के बीच में टूट जाएगी। टेस्ट: 12 344 567


0

TLDR; स्वीकृत उत्तर के अलावा; एक निहित है और एक स्पष्ट है।

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

अधिक ठोस होने के लिए, यदि आउटपुट HTML थे:

<html>
   <title>hello</title>
   <body>
       <p>
           Tell me and I will forget. Teach me and I
           may remember.  Involve me and I will learn.
       </p>
   </body>
</html>

ब्राउज़र इन सभी शब्दों (यहां तक ​​कि बेहतर डेवलपर पठनीयता के लिए इंडेंट किया गया है) के बीच एक स्थान प्रदान करेगा।

यदि, हालांकि, आपने एक ही बात रखी और केवल <p>टैग को इसमें बदल दिया :

<p>Hello&nbsp;&nbsp;&nbsp;There</p>

फिर यह रिक्त स्थान को प्रस्तुत करेगा, जैसा कि आपने इसे अधिक स्पष्ट रूप से निर्देश दिया है। स्टाइलिंग के लिए इन स्थानों का उपयोग करने का कुछ इतिहास है। यह उपयोग कुछ हद तक कम हो गया है क्योंकि सीएसएस परिपक्व हो गया है। हालांकि, HTML चरित्र संस्थाओं में से कई के लिए अभी भी वैध उपयोग हैं: अप्रत्याशित रूप से / अनजाने में व्याख्या से परहेज (जैसे कि यदि आप प्रदर्शित करना चाहते थे)। W3 अन्य चरित्र कोड को दिखाने के लिए एक महान पृष्ठ है


कोशिश करें: <p>Hello &nbsp; There</p>या <p>Hello &nbsp; &nbsp; &nbsp; There</p>(यदि ब्रेकिंग एक समस्या नहीं है तो आप कुछ बिट्स को हर से पहले और बाद में रेगुलर खाली जगह का उपयोग करके बचा सकते हैं &nbsp;)।
साइबोर्ग
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.