Question

这是我的代码：

name="Bus/Car";
amount = "21";

return amount + name;

这呈现：

21Bus /车载

我想做的是这样的事情：

return amount + "    "  + name;

得到： 21 ____总线/汽车

（下划线是空格，stow将我的空格移到这里; - ））

我尝试使用 并加入一个空字符串数组，但它不起作用。

我认为应该可以在两者之间的字符串中添加html代码，以创建一个包含空格的<p> </p>，但我找不到如何操作。

编辑：这是我的HTML，我在这里使用Polymer。

<template is="dom-repeat" items="[[item.parking]]" as="parking">
    <obj-label theme="neutral-dark">[[_getParking(parking)]]</obj-label>
    <br>
</template>

item.parking看起来像这样：

    "parking" : [{"bus" : "2"},
                 {"privat" : "21"}
                ]

javascript部分：

_getParking : function(parking){
      var name,
          amount = parking[Object.keys(parking)[0]];

      if(Object.keys(parking)[0] == "bus"){
        name="Bus/Car";
      }else{
        name="Privatwagen";
      }

      return amount + name;
    }

Answer 1

这有用吗？

<p>21     Bus/Car</p>

不。

这......有用吗？

<p style="white-space: pre-wrap">21     Bus/Car</p>

烨。

试试。

备选方案包括&emsp;（结果：21 Bus / Car）并实际使用元素（例如<span>）并将它们设置为具有适当的边距。

Answer 2

一种可能的解决方案是添加css属性以保留空格：

white-space: pre-wrap;

Answer 3

嗯，这并没有回答我的问题，但我不得不继续以丑陋的方式做到这一点：

HTML：

<template is="dom-repeat" items="[[item.parking]]" as="parking">
  <div style="width:50px; float:left">
    <obj-label theme="neutral-dark">[[_getParking(parking, "amount")]]</obj-label>
  </div>
  <div style="float:left;">
    <obj-label theme="neutral-dark">[[_getParking(parking, "name")]]</obj-label>
  </div>
  <br>
</template>

JS：

  _getParking : function(parking, field){
    var name,
        amount = parking[Object.keys(parking)[0]];
    if(field == "amount"){
      return amount;
    }else{
      if(Object.keys(parking)[0] == "bus"){
        name="Bus/Car";
      }else{
        name="Privatwagen";
      }
        return name;
    }
  }

从Javascript字符串渲染HTML中的空格

3 个答案: