Pytanie Dlaczego przeglądarka renderuje znak nowej linii jako spację?


Od najdłużej chciałem zrozumieć, dlaczego przeglądarka dodaje pustą przestrzeń między wyrenderowanymi elementami HTML, gdy istnieje między nimi Nowa Linia, na przykład:

<span>Hello</span><span>World</span>

Powyższy html wypisze ciąg "HelloWorld" bez spacja między "Hello" i "World", jednak w następującym przykładzie:

<span>Hello</span>
<span>World</span>

Powyższy html wypisze ciąg "Hello World" z spacja między "Hello" i "World".

Teraz nie mam problemu z zaakceptowaniem, że jest to po prostu sposób, w jaki działa, ale to, co mnie trochę martwi, to to, że zawsze miałem wrażenie, że spacje (lub znaki nowej linii) między elementami html nie będą miały znaczenia w czasie, gdy przeglądarka renderowała html do użytkownika.

Moje pytanie brzmi, czy ktokolwiek wie, jaka jest filozoficzna lub techniczna przyczyna tego zachowania.

Dziękuję Ci.


52
2018-02-25 23:13


pochodzenie




Odpowiedzi:


Przeglądarki skracają wiele białych znaków (w tym znaki nowej linii) do pojedynczej spacji podczas renderowania. Jedyny wyjątek jest w środku <pre> elementy lub te, które mają Właściwość CSS white-space Ustawić pre lub pre-wrap zestaw. (Lub w XHTML, xml:space="preserve" atrybut.)


50
2018-02-25 23:15



lub white-space: pre-line; - Andrew Evt
@AndrewEvt O ile mogę powiedzieć, pre-line nadal powoduje zwinięcie wielu spacji, z wyjątkiem znaków nowej linii. Chociaż twój komentarz doprowadził mnie do znalezienia pre-wrap. - David Z


Białe spacje między elementami bloku są ignorowane. Jednak spacje między elementami śródliniowymi są przekształcane w jedną przestrzeń. Rozumowanie jest takie, że elementy śródliniowe mogą być przeplatane regularnym wewnętrznym tekstem elementu nadrzędnego.

Rozważmy następujący przykład:

<p>This is my colored <span class="red_text">Hello</span> <span class="blue_text">World</span> example</p>

W idealnym przypadku chcesz, aby użytkownik zobaczył

This is my colored Hello World example

Usunięcie białych znaków między dwoma zakresami spowoduje jednak:

This is my colored HelloWorld example

Ale ta sama próbka może zostać przepisana przez autora (z OCD o formatowaniu HTML :-)) jako:

<p>
  This is my colored
  <span class="red_text">Hello</span>
  <span class="blue_text">World</span>
  example
</p>

Byłoby lepiej, gdyby było to zgodne z poprzednim przykładem.


48
2018-02-25 23:23



Właśnie natknąłem się na to, ponieważ mam do czynienia z tym samym problemem. Niezła, wyjaśniająca odpowiedź. Byłoby miło, gdyby przeglądarki wymagały spacji między rozpiętościami w powyższym przykładzie, niezależnie od nowej linii. Wiem, że mogą pojawić się problemy z edytorami tekstu, takimi jak Sublime, których można użyć do przycinania białej przestrzeni, ale miałoby to dla mnie większy sens. Czy to nie może być do doctype (przejściowy, ciąg itp.)? Chodzi mi o to, że obsługujemy wiele stron internetowych, które używają tego samego znacznika, ale na niektórych stronach zauważam dużo więcej niż na innych. Będę miał na to oko, na wypadek gdyby to był typ dokumentu. - ClarkeyBoy


HTML jest określony, aby zrobić to tak:

Podziały linii są również znakami spacji

http://www.w3.org/TR/REC-html40/struct/text.html#h-9.1


12
2018-02-25 23:20





Jeśli miałbyś znak "a" między dwoma znacznikami, spodziewałbyś się, że zostanie wyrenderowany. W tym przypadku masz znak "\ n" między dwoma znacznikami; zachowanie jest analogiczne i spójne ("\ n" jest renderowane jako pojedynczy biały znak).


1
2018-02-25 23:18





Przeglądarki popełniają błąd tutaj:

http://www.w3.org/TR/html4/appendix/notes.html#h-B.3.1

SGML (patrz [ISO8879], sekcja 7.6.1) określa, że ​​podział wiersza bezpośrednio po znaczniku początkowym musi zostać zignorowany, podobnie jak podział wiersza bezpośrednio przed znacznikiem końcowym. Dotyczy to wszystkich elementów HTML bez wyjątku.


-1
2017-10-03 18:43



Nie, popełniasz błąd tutaj: linia podziału w przykładzie OP jest po tag końcowy! - Tim Pietzcker