您将如何添加非中断空间等。在文本中？答案

【问题标题】：How would you add non breaking space and ect. in the text?您将如何添加非中断空间等。在文本中？
【发布时间】：2020-02-05 12:15:50
【问题描述】：

目标是显示这样的字符串：

苹果、香蕉、柠檬

假设它在一个数组中。

const fruits = ['Apple', 'Banana', 'Lemon']

我想用逗号和空格加入这个数组。你会怎么做？

新设计来了，他们想展示

苹果、??????香蕉、????柠檬

与逗号、双语和表情符号结合使用。

您将如何重组第一个实施？

【问题讨论】：

第二个是可怕。首先，您将 HTML 构造为字符串。接下来，它更难阅读，因为它更大。除非您找出 CSS 规则，否则它也没有任何意义。哦，你最好希望没有任何覆盖。当然，一个空间有点难以注意到，但这并不难。等宽字体比将原始 HTML 转换成字符串更有帮助。
“太容易被同事忽视” - 然后适当地记录它，f.e.通过靠近这些行的内联注释......？
@04FS 嗯，我不会那么相信 cmets 的文档。但是您至少可以编写自记录代码space = " "; arr.join("," + space)。话又说回来，我会说即使这是矫枉过正。通常，空格并不难注意到。如果真的需要，我使用过的每个编辑器都可以选择显示空白字符。

标签： javascript css

【解决方案1】：

如果你想添加 HTML，你应该正确地创建它。 Define 一个包装器，iterate 覆盖数组中的项目以将它们添加到其中。

至于空格，添加空白字符绝不是一个好主意。如果要在元素之间创建空间，请使用 CSS padding / margins。

const array = ['Apple', 'Banana', 'Lemon'];
const wrapper = document.createElement("div");

for (const item of array) {
  const itemWrapper = document.createElement("span");
  itemWrapper.classList.add('space');
  itemWrapper.innerText = item;
  wrapper.append(itemWrapper);
}

document.documentElement.append(wrapper);

.space {
  margin-right: 1em;
}

【讨论】：