为什么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属性自动修剪字符串？

回答

相关问题