Render spaces in HTML from Javascript strings

Question

Here my code:

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

return amount + name;

This renders:

21Bus/Car

What I want to do is something like this:

return amount + "    "  + name;

And get: 21____Bus/Car

(underscores are spaces, stow removes my spaces here to ;-))

I tried to use   and to join an array of empty strings but it doesn't works.

I think it should be possible to add html code in a string in between to create a <p> </p> with spaces in it but I don't find how to do it.

EDIT : This is my HTML I'm using Polymer here.

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

item.parking looks like this:

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

The javascript part :

_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

Does this work?

<p>21     Bus/Car</p>

Nope.

Does... this work?

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

Yup.

Try that.

Alternatives include   (result: 21 Bus/Car) and actually using elements (eg. <span>) and styling them to have appropriate margins.