Apa perbedaan antara "& nbsp;" dan ""?

Keduanya berarti ruang, tetapi apakah ada perbedaan?

Salah satunya adalah ruang tanpa putus dan yang lainnya adalah ruang biasa. Ruang tanpa putus berarti bahwa garis tersebut tidak boleh dibungkus pada titik itu, sama seperti itu tidak akan terbungkus di tengah kata.

Lebih jauh seperti yang ditunjukkan Svend dalam komentarnya, ruang yang tidak putus tidak runtuh.

Entitas  menghasilkan ruang tanpa putus, yang digunakan ketika Anda tidak ingin garis terputus otomatis pada posisi itu. Ruang reguler memiliki kode karakter 32, sedangkan ruang non-breaking memiliki kode karakter 160.

Misalnya ketika Anda menampilkan angka dengan spasi sebagai pemisah ribuan: 1 234 567, maka Anda menggunakan spasi tanpa putus sehingga jumlahnya tidak dapat dibagi pada garis yang terpisah. Jika Anda menampilkan mata uang dan ada ruang antara jumlah dan mata uang: 42 SEK, maka Anda menggunakan ruang tanpa melanggar sehingga Anda tidak mendapatkan jumlah pada satu baris dan mata uang pada berikutnya.

Selain jawaban lain di sini, ruang yang tidak melanggar tidak akan "diciutkan" seperti ruang biasa. Misalnya keduanya

<p>Word1          Word2</p>

dan

<p>Word1 Word2</p>

akan membuat hal yang sama di browser apa pun, sementara

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

akan menyimpan spasi saat dirender.

Bukan jawaban sebanyak contoh ...

Contoh 1:

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

Contoh # 2:

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

Dan tautan ke biola .

Anda dapat melihat contoh kerja di sini:

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

dan

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

Div yang sama, teks yang sama, "spasi" yang berbeda

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

vs.

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

Beberapa karakter spasi putih normal (spasi, tabulator, dan pemisah baris) diperlakukan sebagai satu karakter spasi putih tunggal :

Untuk semua elemen HTML kecuali PRE, urutan spasi putih memisahkan "kata" (kami menggunakan istilah "kata" di sini untuk berarti "urutan karakter spasi non-putih"). Saat memformat teks, agen pengguna harus mengidentifikasi kata-kata ini dan meletakkannya sesuai dengan konvensi bahasa tertulis (skrip) tertentu dan media target.

Begitu

foo    bar

ditampilkan sebagai

foo bar

Tapi ruang tanpa istirahat selalu ditampilkan. Begitu

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

ditampilkan sebagai

foo   bar

Seperti yang telah disebutkan, Anda tidak akan menerima jeda baris di mana ada "ruang tanpa istirahat".

Juga berhati-hatilah, bahwa elemen yang hanya mengandung "" mungkin muncul secara tidak benar, di mana & nbsp; akan bekerja. Dalam contoh 6 setidaknya (sejauh yang saya ingat, IE7 memiliki masalah yang sama), jika Anda memiliki elemen tabel kosong, itu tidak akan menerapkan gaya, misalnya perbatasan, ke elemen, jika tidak ada konten, atau hanya putih ruang. Jadi yang berikut tidak akan dirender dengan batas:

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

Sedangkan perbatasan akan ditampilkan dalam contoh ini:

<td>& nbsp;</td>

Hmm-harus memasukkan ruang dummy untuk membuatnya tampil dengan benar di sini

Yang pertama tidak diperlakukan sebagai ruang putih oleh parser HTML, yang kedua adalah. Akibatnya "" tidak dijamin akan muncul di dalam markup HTML tertentu, sementara ruang yang tidak pecah akan selalu muncul.

  harus ditangani sebagai spasi.

   harus ditangani sebagai dua spasi putih

'' dapat ditangani sebagai ruang kosong yang tidak menarik

'' + '' dapat ditangani sebagai tunggal ''

  stackable, artinya Anda dapat membuat beberapa ruang sekaligus.

HTML hanya akan mem-parsing satu spasi '' dan akan menjatuhkan sisanya ...

Jika Anda ingin lima spasi, Anda akan menempatkan 5 x  

@ Zoidberg benar, contoh:

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

tidak akan menampilkan ruang antara markup header, dengan

& nbsp ; 

akan melakukan ruang :)

Ketika mengalami jeda baris, garis tidak akan terputus ketika Anda menggunakan $ bnsp; karena ini adalah 'ruang tanpa putus'. Ini bisa menjadi penting jika Anda memiliki nama produk tertentu atau yang seperti itu, yang akan selalu ditulis bersama.

Dapat menarik jika Anda (harus) menggunakan spasi putih sebagai pembatas dalam angka, seperti 12344567, yang ditampilkan 12 344 567 di Perancis. Tanpa garis akan terputus di tengah angka, sangat jelek. Uji: 12 344 567

TLDR; Selain jawaban yang diterima; Satu implisit dan satu eksplisit.

Ketika HTML yang Anda tulis atau hasilkan oleh aplikasi / library / framework dibaca oleh browser Anda, yang terbaik adalah menginterpretasikan apa arti HTML Anda (yang dapat bervariasi dari browser ke browser). Saat Anda menggunakan kode entitas HTML, Anda menjadi lebih spesifik untuk browser. Anda secara eksplisit mengatakan bahwa Anda ingin menampilkan karakter kepada pengguna (dan bukan berarti Anda hanya memberi jarak pada HTML Anda untuk keterbacaan yang lebih mudah bagi pengembang misalnya).

Agar lebih konkret, jika output HTML adalah:

<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>

Browser hanya akan membuat satu ruang di antara semua kata-kata ini (bahkan yang telah diindentasi untuk keterbacaan pengembang yang lebih baik.

Namun, jika Anda meletakkan hal yang sama dan hanya mengubah <p>tag ke:

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

Maka itu akan memberikan spasi, karena Anda telah menginstruksikannya lebih eksplisit. Ada beberapa riwayat menggunakan ruang-ruang ini untuk penataan. Penggunaan ini agak berkurang karena CSS telah matang. Namun, masih ada kegunaan yang valid untuk banyak entitas karakter HTML: menghindari interpretasi yang tidak terduga / tidak sengaja (misalnya jika Anda ingin menampilkan kode). The w3 memiliki halaman yang besar untuk menunjukkan kode karakter lain .