อะไรคือความแตกต่างระหว่าง“ & nbsp;” และ“”?

ทั้งคู่หมายถึงพื้นที่ แต่มีความแตกต่างกันบ้างไหม?

หนึ่งคือพื้นที่ไม่ทำลายและอื่น ๆ เป็นพื้นที่ปกติ ช่องว่างที่ไม่ทำลายหมายความว่าไม่ควรพันเส้นที่จุดนั้นเหมือนกับว่ามันจะไม่ถูกพันกลางคำ

นอกจากนี้เมื่อ Svend ชี้ให้เห็นในความคิดเห็นของเขาช่องว่างที่ไม่ทำลายจะไม่ยุบ

เอนทิตี สร้างพื้นที่ไม่แตกซึ่งใช้เมื่อคุณไม่ต้องการให้ตัวแบ่งบรรทัดอัตโนมัติที่ตำแหน่งนั้น ช่องว่างปกติมีรหัสอักขระ 32 ในขณะที่ช่องว่างไม่แตกมีรหัสอักขระ 160

ตัวอย่างเช่นเมื่อคุณแสดงตัวเลขที่มีช่องว่างเป็นตัวคั่นหลักพัน: 1 234 567 จากนั้นคุณใช้ช่องว่างแบบไม่ทำลายเพื่อให้ตัวเลขไม่สามารถแบ่งเป็นบรรทัดแยกได้ หากคุณแสดงสกุลเงินและมีช่องว่างระหว่างจำนวนเงินและสกุลเงิน: 42 SEK คุณต้องใช้ช่องว่างที่ไม่ทำลายเพื่อให้คุณไม่ได้รับจำนวนเงินในบรรทัดเดียวและสกุลเงินถัดไป

นอกจากคำตอบอื่น ๆ ที่นี่การเว้นวรรคแบบไม่แบ่งจะไม่ถูก "ยุบ" เหมือนกับการเว้นวรรคปกติ ตัวอย่างเช่นทั้งสอง

<p>Word1          Word2</p>

และ

<p>Word1 Word2</p>

จะแสดงผลเหมือนกันบนเบราว์เซอร์ใด ๆ ในขณะที่

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

จะทำให้ช่องว่างเมื่อแสดงผล

ไม่ได้คำตอบมากเท่ากับตัวอย่าง ...

ตัวอย่าง # 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>

และเชื่อมโยงไปยังซอ

คุณสามารถดูตัวอย่างการทำงานได้ที่นี่:

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

และ

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

div เดียวกัน, ข้อความเดียวกัน, "ช่องว่าง" ที่แตกต่างกัน

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

VS

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

อักขระช่องว่างสีขาวปกติหลายรายการ (ช่องว่างตัวจัดรูปแบบและตัวแบ่งบรรทัด) ถือเป็นอักขระช่องว่างสีขาวเดียว :

สำหรับองค์ประกอบ HTML ทั้งหมดยกเว้นPREลำดับของ white space แยก "word" (เราใช้คำว่า "word" ที่นี่เพื่อหมายถึง "sequences ของอักขระเว้นวรรคที่ไม่ใช่ white") เมื่อจัดรูปแบบข้อความตัวแทนผู้ใช้ควรระบุคำเหล่านี้และจัดเรียงตามแบบแผนของภาษาที่เขียน (สคริปต์) และสื่อเป้าหมาย

ดังนั้น

foo    bar

จะปรากฏเป็น

foo bar

แต่ไม่มีช่องว่างหยุดแสดงเสมอ ดังนั้น

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

จะปรากฏเป็น

foo   bar

ดังที่ได้กล่าวไปแล้วคุณจะไม่ได้รับการขึ้นบรรทัดใหม่โดยที่มี "ช่องว่างไม่พัก"

นอกจากนี้ระวังองค์ประกอบที่มีเพียง "" อาจปรากฏอย่างไม่ถูกต้องโดยที่ & nbsp; จะทำงาน. ใน 6 อย่างน้อย (เท่าที่ฉันจำได้ IE7 มีปัญหาเดียวกัน) หากคุณมีองค์ประกอบตารางที่ว่างเปล่ามันจะไม่ใช้สไตล์สำหรับตัวอย่างเช่นเส้นขอบกับองค์ประกอบหากไม่มีเนื้อหาหรือสีขาวเท่านั้น ช่องว่าง ดังนั้นสิ่งต่อไปนี้จะไม่ถูกแสดงด้วยเส้นขอบ:

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

โดยที่เส้นขอบจะปรากฏในตัวอย่างนี้:

<td>& nbsp;</td>

อืม - ต้องใส่ในพื้นที่จำลองเพื่อให้มันแสดงผลได้อย่างถูกต้องที่นี่

ตัวแรกไม่ถูกถือว่าเป็น white space โดยตัวแยกวิเคราะห์ HTML ตัวที่สองคือ ด้วยเหตุนี้ "" จึงไม่รับประกันว่าจะแสดงภายในมาร์กอัพ HTML บางอันในขณะที่พื้นที่ที่ไม่สามารถแตกได้จะปรากฏขึ้นเสมอ

  ควรจัดการเป็นช่องว่าง

   ควรได้รับการจัดการเป็นสองช่องว่าง

'' สามารถจัดการได้เป็นช่องว่างที่ไม่น่าสนใจ

'' + '' สามารถจัดการเป็น '' เดียว

  วางซ้อนกันได้ซึ่งหมายความว่าคุณสามารถสร้างช่องว่างหลายช่องพร้อมกัน

HTML จะแยกวิเคราะห์หนึ่งช่องว่าง '' เท่านั้นและจะลดที่เหลือ ...

ถ้าคุณต้องการห้าช่องว่างคุณจะวาง 5 x  

@Zoidberg ถูกต้องตัวอย่างเช่น:

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

จะไม่แสดงช่องว่างระหว่างมาร์กอัปส่วนหัวด้วย

& nbsp ; 

จะทำพื้นที่ :)

เมื่อมีการขึ้นบรรทัดใหม่บรรทัดจะไม่แตกเมื่อคุณใช้ $ bnsp เพราะมันเป็น 'พื้นที่ไม่ทำลาย' สิ่งนี้อาจมีความสำคัญหากคุณมีชื่อผลิตภัณฑ์บางอย่างหรือเช่นนั้นจะต้องเขียนด้วยกันเสมอ

อาจเป็นเรื่องที่น่าสนใจหากคุณ (ต้อง) ใช้ช่องว่างเป็นตัวคั่นในตัวเลขเช่น 12344567 ที่แสดง 12 344 567 ในฝรั่งเศส หากไม่มีเส้นจะแบ่งกลางจำนวนน่าเกลียดมาก ทดสอบ: 12 344 567

TLDR; นอกจากคำตอบที่ยอมรับแล้ว; หนึ่งคือโดยนัยและอีกหนึ่งชัดเจน

เมื่อเบราว์เซอร์ของคุณเขียนหรือสร้างโดยแอปพลิเคชัน / ไลบรารี / กรอบงานจะเป็นการดีที่สุดที่จะตีความความหมาย 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>

จากนั้นมันจะแสดงช่องว่างตามที่คุณได้สั่งไว้อย่างชัดเจนยิ่งขึ้น มีประวัติการใช้พื้นที่เหล่านี้เพื่อจัดแต่งทรงผม การใช้งานนี้ลดลงบ้างเนื่องจาก CSS ได้ครบกำหนดแล้ว อย่างไรก็ตามยังมีการใช้งานที่ถูกต้องสำหรับเอนทิตีอักขระ HTML หลายรายการ: หลีกเลี่ยงการตีความโดยไม่คาดหมาย / ไม่ได้ตั้งใจ (เช่นหากคุณต้องการแสดงรหัส) w3 มีหน้าดีที่จะแสดงรหัสตัวละครอื่น