在 Javascript document.write 中添加空格

Adding whitespace in a Javascript document.write

本文关键字：添加 空格 write Javascript document      更新时间：2023-09-26

所以我目前正在使用一些JavaScript和一组对象创建一个动态表。 我需要在两者之间添加一些空格，但一个空格是不够的，我需要将其几乎标记掉。 最好的方法是什么？ 这是我到目前为止的代码：

var sections = {
   p1 : {sname: "Dynamic Table", mscore: 20},
   p2 : {sname: "IntelliJ Usage", mscore: 10},
   p3 : {sname: "Calender Control", mscore: 30},
   p4 : {sname: "Active Form", mscore: 20},
   p5 : {sname: "Object Database", mscore: 20}
};
document.write(Object.keys(sections).reduce(function(s, p, i) {
   var o = sections[p];
   return s + (i>0?'<br><br><br><br>':'') + o.sname + '  ' + o.mscore + ' ' }, '')
);
如果要

向 DOM 添加空格，请尝试使用不间断空格

'&nbsp;'

而不是 

' '

这些不间断空格可以链接。

&nbsp;&nbsp;

将强制在页面上显示两个空格。

您可以return s + "<div class='whatever'>" + o.sname + ' ' + o.mscore + "</div>"并使用CSS来设置空格。

var sections = {
   p1 : {sname: "Dynamic Table", mscore: 20},
   p2 : {sname: "IntelliJ Usage", mscore: 10},
   p3 : {sname: "Calender Control", mscore: 30},
   p4 : {sname: "Active Form", mscore: 20},
   p5 : {sname: "Object Database", mscore: 20}
};
document.write(Object.keys(sections).reduce(function(s, p, i) {
   var o = sections[p];
   return s + "<div class='whatever'>" + o.sname + '  ' + o.mscore + "</div>" }, '')
);
div.whatever { padding-bottom: 5em; }

更新 使用表：

var sections = {
   p1 : {sname: "Dynamic Table", mscore: 20},
   p2 : {sname: "IntelliJ Usage", mscore: 10},
   p3 : {sname: "Calender Control", mscore: 30},
   p4 : {sname: "Active Form", mscore: 20},
   p5 : {sname: "Object Database", mscore: 20}
};
document.write("<table>" + Object.keys(sections).reduce(function(s, p, i) {
   var o = sections[p];
   return s + "<tr><td>" + o.sname + '</td><td>' + o.mscore + "</td></tr>" }, '')
+ "</table>");
td { padding-bottom: 2em }

控制间距的最佳方法是通过 CSS。将每个包裹在一个班级中，并根据口味进行造型。

另一种方法是使用几个不间断空格&nbsp;。

因此： return s + (i>0?'<br><br><br><br>':'') + o.sname + '&nbsp;&nbsp;&nbsp;' + o.mscore + ' ' }, '')

最快的解决方案是将所有部分包装在<pre></pre>标签中。

在您的代码中：

var sections = {
   p1 : {sname: "Dynamic Table", mscore: 20},
   p2 : {sname: "IntelliJ Usage", mscore: 10},
   p3 : {sname: "Calender Control", mscore: 30},
   p4 : {sname: "Active Form", mscore: 20},
   p5 : {sname: "Object Database", mscore: 20}
};
document.write("<pre>"); //<--here
document.write(Object.keys(sections).reduce(function(s, p, i) {
   var o = sections[p];
   return s + (i>0?'<br><br><br><br>':'') + o.sname + '  ' + o.mscore + ' ' }, '')
);
document.write("</pre>"); //<--...and here

更好的解决方案是使用CSS

.wrapper-class {
    white-space: nowrap;
}

使用四个或五个不间断空格来添加制表符。代码将如下所示&nbsp;&nbsp;&nbsp;

如果您需要在显示的内容中使用选项卡，请考虑 CSS 提供的格式选项。

要在 DOM 中添加空间，您必须使用两个 'nbsp;' 来打印一个这样的空格

document.write('nbsp;');
document.write('nbsp;');

这将只打印我在其中一个模式问题中找到的一个空格。

相关文章：