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;
    }

Please show us the code where you used   and how you're inserting the content into the page. — j08691
– j08691, Commented Jan 22, 2016 at 15:12

Niet the Dark Absol · Accepted Answer · 2016-01-22 15:12:55Z

3

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 &emsp; (result: 21 Bus/Car) and actually using elements (eg. <span>) and styling them to have appropriate margins.

answered Jan 22, 2016 at 15:12

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Getter Jetter Over a year ago

This doesn't seem to work for me, I edited my question

idmitme · Accepted Answer · 2016-01-22 15:17:12Z

0

One possible solution is adding css property to preserve spaces:

white-space: pre-wrap;

answered Jan 22, 2016 at 15:17

idmitme

9297 silver badges13 bronze badges

Comments

Getter Jetter · Accepted Answer · 2016-01-22 15:53:30Z

Well this doesn't answers my question but I had to go on and did it now the ugly way:

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;
    }
  }

Collectives™ on Stack Overflow

Render spaces in HTML from Javascript strings

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related