Warum schneidet die InnerHTML-Eigenschaft die Zeichenfolge automatisch ab?

Question

hier ist mein Code:

function myFunction() { 
 
    var str = " Hello World "; 
 
\t document.getElementById("demo").innerHTML=str; 
 
    alert(str); 
 
    }

<p id="demo"></p> 
 
    <button onclick="myFunction()">Try it</button>

Während das Benachrichtigungsfenster die Zeichenfolge ausgibt, wie es ist d.h mit Leerzeichen, das p-Element ohne Leerzeichen die Zeichenfolge in getrimmten Form d.h erhält?

Answer 1

Es ist nicht das innereHTML. Echte Schuldige sind Browser. Sie können die Leerzeichen im Browser nicht direkt mit Zeichenfolgenliteralen anzeigen, da alle Browser Leerzeichen immer in HTML schneiden. Sie haben &nbsp, um sie zu sehen.

Während der Browser verarbeitet Ihr HTML, es folgt einige Regeln.

Hier wird die 16.6.1 The 'white-space' processing model

ist, wenn 'Weißraum' auf 'Normal' gesetzt wird, 'nowrap' oder 'pre-line',

jede Lasche (U + 0009) ist konvertiert in ein Leerzeichen (U + 0020)

beliebiger Platz (U + 0020) nach einem anderen Leerzeichen (U + 0020) - auch ein Leerzeichen vor dem Inline, wenn in diesem Feld auch 'white-space' auf 'normal' gesetzt ist ',' nowrap 'oder' pre-line '- wird entfernt.

Answer 2

In HTML werden normale Leerzeichen-Zeichen zwischen Tags nicht als Leerzeichen interpretiert, die vom Browser gerendert werden.
Wenn Sie eines oder mehrere von ihnen deklarieren, erhalten Sie das gleiche Ergebnis: Sie sind reduziert und werden als einzelnes Leerzeichen dargestellt.

mehrere Leerzeichen zu machen, haben Sie zwei Möglichkeiten:

• in einfachem HTML verwenden, um die   Entität (  oder non-breaking space)

• in CSS, verwenden Sie die white-space Eigenschaft: white-space: pre-wrap;

pre-wrap

Sequenzen von Leerzeichen bleiben erhalten. Die Zeilen werden an den Zeichen der neuen Zeile unter <br> und nach Bedarf zum Füllen von Zeilenfeldern unterbrochen.

Quelle: MDN’s article on white-space

Answer 3

Es hängt vom Browser ab.

Wenn Sie wollen sicher sein, um den Raum zu haben, dies tun:

function myFunction() { 
var str = " Hello World "; 
document.getElementById("demo").innerHTML="&nbsp" + str + "&nbsp"; 
alert(str); 
} 
myFunction(); 

Answer 4

Wenn Sie diese Leerzeichen sehen möchten, können Sie CSS die white-space Eigenschaft und setzen Sie ihn auf pre (die auf bestimmten bricht nur verwenden Zeilenumbrüche) oder pre-wrap (die bei Bedarf bricht).

Sind Sie sicher, dass Sie wirklich Text in HTML positionieren möchten? Gibt es einen Grund, dass Sie die Leerzeichen verlassen und stattdessen padding auf Ihrem Element verwenden, um seinen Inhalt zu verschieben?