爲什麼innerHTML屬性自動修剪字符串？

這裏是我的代碼：爲什麼innerHTML屬性自動修剪字符串？

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

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

雖然Alert窗口輸出，因爲它是即用空格，p元素接收的字符串中修整形式即不帶空格的字符串？

來源

2017-07-29 Abhijeet Dolai

這不是innerHTML。真正的罪魁禍首是瀏覽器。您無法直接使用字符串文字查看瀏覽器中的空格，因爲所有瀏覽器都將始終截斷HTML中的空格。您使用&nbsp來查看它們。

雖然瀏覽器處理你的html，它遵循一些規則。

這裏是16.6.1 The 'white-space' processing model

如果 '空白' 被設置爲 '正常'， 'NOWRAP' 或 '預線'，

每片（U + 0009）是轉換爲空格（U + 0020）

其他空格（U + 0020）之後的任何空格（U + 0020） - 即使是內聯之前的空格，如果該空格也將「空格」設置爲「正常'，'nowrap'或'pre-line' - 將被刪除。

來源

2017-07-29 10:15:13

在HTML中，標籤之間的常規空白字符不會被解釋爲瀏覽器要呈現的空白。
聲明它們中的一個或多個將給出相同的結果：它們被摺疊並呈現爲單個空間。

要渲染多個空格，你有兩種方式：

純HTML
使用 實體（，或不間斷空格）
在CSS
，使用white-space屬性： white-space: pre-wrap;

預纏繞

保留了空格的序列。行在新行個字符處，在<br>處被破壞，並且根據需要填充行盒。

來源：MDN’s article on white-space

來源

2017-07-29 10:15:34 davidxxx

該方法的問題在於，線條無法在該位置打破。 – Stephan

@Stephan這是一種純粹的HTML方式。而這種方法的作品。但無論如何說明兩者都是有道理的。我只是添加了CSS的方式。 – davidxxx

-1

這取決於瀏覽器。

如果你想確保有空間，這樣做：

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

來源

2017-07-29 10:21:18 ptts

起初缺少分號。此外，即使當「str」包含更多2×2空格時，不包含任何空格和太少空格，也會呈現另外兩個空格。 – Stephan

如果你想看到這些空格，你可以使用CSS的white-space屬性並將其設置爲pre（打破只能在給定的換行符）或pre-wrap（在必要時會中斷）。

但是你確定，你真的想在HTML中定位文本嗎？是否有任何理由讓你離開這些空間，而用元素上的padding來改變它的內容？

來源

2017-07-29 10:23:56 Stephan

引用CSS方式的好主意。 – davidxxx

爲什麼innerHTML屬性自動修剪字符串？

回答

相關問題