如何强制文本数组中的空格？

Question

所以我正在编写一个随机短语生成器。 但是我不能在我的句子的每个部分之后得到一个空格......

当我在数组中写一个空格时它不起作用，当我在打印短语部分的 div 之间放置   时它也不起作用......

你能帮帮我吗？我一直在研究这个小提琴：

http://jsfiddle.net/leokaj/wyndk9dk/14/

var adjective = [
  'an amazing ',
  'a luxurious ',
  'a crazy ',
  'an imaginary ',
  'a fun ',
  ],
  //the current adjectives length
  maxAdjective = adjective.length;

提前致谢！

Answer 1

$.html 正在解析这些空格。

您可以像这样使用escape character 显式添加空格：

$(selector).html(randomVerb + " ");

小提琴：http://jsfiddle.net/pgzocwd2/1/

Answer 2

你也可以用一些 css 来做到这一点，但它可能不那么干净

.parts:after {
  content: "\00a0";
}

Working jsFiddle

Answer 3

您正在尝试内联显示块元素。只需将显示设置为inline 并放弃float:left：

.parts {
    display: inline;
}

Answer 4

当然最好使用带有跨度的<p>，而不是一系列div。如下：

<p id="fullSentence"><span class="parts random-adjective"></span> <span class="parts random-noun"></span> <span class="parts random-context"></span> <span class="parts random-verb"></span> <span class="parts random-adjective"></span> <span class="parts random-noun"></span>.</p>

我刚刚在小提琴中对其进行了测试（在删除 css 中的浮点数之后，它给了我这个：

an imaginary rabit on a quest fishing with an imaginary rabit .

我还有一个函数可以将短语的第一个字母大写，并且我还添加了句号。但是使用带有 span 的 p 元素似乎比一系列 div 更正确。