在 Javascript document.write 中添加空格答案

【问题标题】：Adding whitespace in a Javascript document.write在 Javascript document.write 中添加空格
【发布时间】：2016-02-03 20:28:47
【问题描述】：

所以我目前正在使用一些 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 + ' ' }, '')
);

【问题讨论】：

标签： javascript html whitespace document.write

【解决方案1】：

如果您想在 DOM 中添加空格，请尝试使用不间断空格

'&nbsp;'

而不是

' '

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

&nbsp;&nbsp;

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

【讨论】：

【解决方案2】：

您可以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 }

【讨论】：

如何在两个分数之间添加空格以使其相等（没有对齐问题）？
您需要使用等宽字体，计算o.sname 的最大字符串长度并填充其余部分。但是使用<table> 并让浏览器为您完成所有这些工作要容易得多。我已经用一个例子更新了答案。

【解决方案3】：

控制间距的最佳方法是通过 CSS。将每一个都封装在一个类中，并根据口味对其进行样式设置。

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

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

【讨论】：

【解决方案4】：

最快的解决方案是将所有部分包装在 <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;
}

【讨论】：

【解决方案5】：

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

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

【讨论】：