Jaka jest różnica między „& nbsp;” i " "?

Oba oznaczają przestrzeń, ale czy jest jakaś różnica?

Jedna to spacja nierozerwalna, a druga to zwykła spacja. Niedzieląca spacja oznacza, że ​​wiersz nie powinien być zawijany w tym miejscu, tak jakby nie był zawijany w środku słowa.

Ponadto, jak wskazuje Svend w swoim komentarzu, spacje nierozdzielające nie są zwinięte.

Encja  tworzy nierozdzielającą spację, która jest używana, gdy nie chcesz, aby automatyczny podział wiersza w tej pozycji. Zwykła spacja ma kod znaku 32, a nierozdzielająca spacja ma kod znaku 160.

Na przykład, gdy wyświetlasz liczby ze spacjami jako separator tysięcy: 1 234 567, używasz nierozdzielających spacji, aby liczba nie mogła zostać podzielona na oddzielne wiersze. Jeśli wyświetlasz walutę i jest spacja między kwotą a walutą: 42 SEK, to używasz nierozdzielającej spacji, aby nie uzyskać kwoty w jednej linii, a waluty w następnej.

Oprócz innych odpowiedzi tutaj, spacje nierozdzielające nie będą „zwinięte”, jak zwykłe spacje. Na przykład oba

<p>Word1          Word2</p>

i

<p>Word1 Word2</p>

będzie renderować się tak samo w każdej przeglądarce, podczas gdy

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

zachowa spacje podczas renderowania.

Nie tyle odpowiedź, ile przykłady ...

Przykład 1:

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

Przykład 2:

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

I link do skrzypiec .

Możesz zobaczyć działający przykład tutaj:

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

i

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

Ten sam element div, ten sam tekst, różne „spacje”

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

vs

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

Wiele zwykłych znaków odstępu (spacja, tabulator i podział wiersza) jest traktowanych jako jeden znak odstępu :

Dla wszystkich elementów HTML z wyjątkiem PREsekwencji białych znaków oddzielających „słowa” (używamy tutaj terminu „słowo” w znaczeniu „sekwencje znaków innych niż białe znaki”). Podczas formatowania tekstu programy użytkownika powinny identyfikować te słowa i układać je zgodnie z konwencjami danego języka pisanego (skryptu) i docelowego medium.

Więc

foo    bar

jest wyświetlany jako

foo bar

Ale spacja bez przerwy jest zawsze wyświetlana. Więc

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

jest wyświetlany jako

foo   bar

Jak już wspomniano, nie otrzymasz znaku końca wiersza, jeśli jest „miejsce bez przerwy”.

Uważaj również, ponieważ elementy zawierające tylko „” mogą być wyświetlane nieprawidłowo, gdzie & nbsp; będzie działać. W ie co najmniej 6 (o ile pamiętam, IE7 ma ten sam problem), jeśli masz pusty element tabeli, to nie zastosuje stylizacji, na przykład ramek, do elementu, jeśli nie ma treści lub tylko biały przestrzeń. Więc następujące elementy nie zostaną wyrenderowane z ramkami:

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

Podczas gdy granice pojawią się w tym przykładzie:

<td>& nbsp;</td>

Hmm-musiałem wstawić obojętne miejsce, aby wyświetlić tutaj poprawnie

Pierwsza nie jest traktowana jako biała przestrzeń przez parser HTML, a druga jest. W rezultacie „” nie ma gwarancji, że pojawi się w ramach pewnych znaczników HTML, podczas gdy nierozerwalna przestrzeń będzie zawsze widoczna.

  powinny być traktowane jako spacje.

   powinny być traktowane jako dwie spacje

„” można traktować jako nieciekawą spację

„+” może być traktowane jako pojedynczy „”

  można układać w stosy, co oznacza, że ​​można razem tworzyć wiele przestrzeni.

HTML przeanalizuje tylko jedną spację '', a resztę porzuca ...

Jeśli chcesz mieć pięć spacji, umieść 5 x  

@Zoidberg ma rację, przykład:

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

nie wyświetli spacji między znacznikami nagłówka, z

& nbsp ; 

zrobi przestrzeń :)

W przypadku znaków końca linii linia nie zostanie przerwana, gdy użyjesz $ bnsp; ponieważ jest to „niełamliwa przestrzeń”. Może to być ważne, jeśli masz określone nazwy produktów lub takie, które zawsze powinny być zapisane razem.

Może być interesujące, jeśli jako separatora liczb używasz (musisz) spacji, na przykład 12344567, który we Francji jest wyświetlany jako 12 344 567. Bez linii pękłaby w połowie liczby, bardzo brzydka. Test: 12 344 567

TLDR; Oprócz zaakceptowanej odpowiedzi; Jeden jest niejawny, a drugi jawny.

Kiedy HTML, który napisałeś lub wygenerowałeś przez aplikację / bibliotekę / framework, zostanie odczytany przez twoją przeglądarkę, najlepiej będzie zinterpretować, co oznacza twój HTML (co może się różnić w zależności od przeglądarki). Kiedy używasz kodów encji HTML, jesteś bardziej specyficzny dla przeglądarki. Wyraźnie mówisz mu, że chcesz wyświetlić użytkownikowi znak (a nie, że umieszczasz swój kod HTML w odstępach, na przykład dla łatwiejszej czytelności dla programisty).

Mówiąc dokładniej, gdyby wyjściowy kod HTML był:

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

Przeglądarka renderowałaby tylko jedną spację między wszystkimi tymi słowami (nawet tymi, które zostały wcięte dla lepszej czytelności dla programistów.

Jeśli jednak umieścisz tę samą rzecz i zmienisz tylko <p>tag na:

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

Następnie wyrenderowałoby spacje, tak jak nakazałeś to bardziej wyraźnie. Istnieje pewna historia wykorzystywania tych przestrzeni do stylizacji. To użycie zostało nieco zmniejszone w miarę dojrzewania CSS. Jednak nadal istnieją ważne zastosowania dla wielu jednostek znakowych HTML: unikanie nieoczekiwanej / niezamierzonej interpretacji (np. Jeśli chcesz wyświetlić kod). W3 ma świetną stronę, aby pokazać inne kody znaków .