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

Posted 2023-03-05

【中文标题】如何强制文本数组中的空格？

【英文标题】：How to force a blank space in a text array?

【发布时间】：2016-06-21 11:27:56

【问题描述】：

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

当我在数组中写一个空格时它不起作用，当我在打印短语部分的 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;

提前致谢！

【问题讨论】：

不幸的是，在 div 元素上忽略了后面没有任何内容的空格，2 个简单的解决方案正在将您的 .html(something) 更改为 .html(something+' ')。另一个只是为您的 div 添加一个 5px 的边距

@juvian 在 block 元素上，而不是在 div 元素上。

对于更简单、更健壮的造句方法，请参阅this jsFiddle，此方法在 “关于如何在句末？”

【参考方案1】：

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

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

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

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

【讨论】：

好的，我试试这个并告诉你:) 感谢您的快速回答！

@LéoKajCbnns 如果您觉得这个答案符合您的需要（通过单击check 图标），您可以接受这个答案，那就太好了。

是的，它只是告诉我在我想点击它时再等 9 分钟 :)

关于如何在句尾使用不同的名词/形容词有什么想法吗？

@LéoKajCbnns 作为一个新问题，你能问“关于如何在句末使用不同的名词/形容词的任何想法”吗？我想告诉你我会怎么做，但这里不适合作为答案

【参考方案2】：

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

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

Working jsFiddle

【讨论】：

就个人而言，我觉得这是最干净的解决方案，因为您只需编写一次就不必再担心它，而每次附加内容时都必须应用此处的另一个答案

另外，  之间也不需要手动空格.parts

【参考方案3】：

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

.parts 
    display: inline;

【讨论】：

起初我错过了你也删除了float:left; 但是是的，这应该是选择的答案！

【参考方案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 更正确。

【讨论】：

我真的不需要在开头使用大写字母，因为我的文本是大写的 :) 但是你知道如何让不同的形容词/名词吃掉我句子的开头和结尾吗？

在开头给它们起不同的名字（class="parts random-noun1"），最后给它们起不同的名字（class="parts random-noun2"）。然后只需将不同部分调用到该命名结构中

@gavgrif 这将是解决第二部分的一个非常糟糕的方法

@DelightedD0D 为什么？ OP 希望短语的每一端都有两个不同的词 - 使用单个类意味着将为每个词分配相同的值

它为现有的代码增加了更多的复杂性和更多的代码，这些代码已经不必要地膨胀了函数和对这些函数的调用。你永远不应该有多个函数，每个函数都针对这样的单独元素。相反，OP 应该着眼于使他们的代码更简单、更抽象。所有这一切都可以通过一个简单的函数和一个 json 对象以及更少的代码来完成，请参阅jsfiddle.net/wyndk9dk/25