2

I have a method in one of my components that gets called in my html page whenever I click on a button. I am currently trying to format the page so that certain attributes (namely city and state) appear at fixed locations in the page. This is what I have so far:

if (this.city !== undefined) {
   let test = 50;
   test -= this.city.length;
   let result = 'City: ' + this.city;
   for ( let i = 0; i < test; i++) {
       result += ' ';
   }
   return result + this.state;
}

However, instead of seeing something like City:

                                       (41 extra spaces) Grapevine TX

it looks like City:

Grapevine TX.

The interesting thing is that extra characters are added as long as they aren't spaces. For example, if I wrote result += 'a', then I would see 41 extra a's in the string.

Using the result += 'a' example, if I wrote the line result = result.replace(/a/g, ' '), then the final output would be City: Grapevine TX. However, if I had originally written result += ' ' and then wrote result = result.replace(/ /g, 'a'), then even though the extra spaces would not appear in the original string, those spaces would be replaced by an 'a.'

How do I add extra whitespace to my string?

Improve this question
4
  • 1
    Try adding &nbsp; instead of a space Commented Jun 19, 2019 at 14:01
  • 4
    HTML omits multiple whitespaces. Unless you use non-breakable ones. However, I suspect you are better off fixing this using CSS and/or other formatting. Commented Jun 19, 2019 at 14:01
  • You can add space as a html character entity like this: &nbsp; Commented Jun 19, 2019 at 14:02
  • &nbsp; might not be encoded into an acutal non-breaking space (for certain string-encoding-safety aspects of angular), unicode escape codes will work better. Commented Oct 22, 2021 at 8:22

8 Answers 8

Reset to default
6

You can add white spacess by adding \xa0.

eg:

result = result.concat("\xa0");
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

It works, and coming from a non html background and to use in nextjs, I prefer to store the value as like below export const space: string = '\xa0'; and calling it like this: {SKU:${space}}
3

Your issue is related to html which omits multiple spaces following another space. Angular is not the root cause.

Pure html Example - Both headlines are dispalyed equally : 

<h1>test     test<h1> 
<h1>test test<h1>

Solution: use tags and/or css for layouting your output.

Improve this answer

1 Comment

is there no way to put multiple spaces following another space in html other than &nbsp (b/c i'm trying to make the amount variable)
3

Try use next code in your css:

.pre-class {
    white-space: pre;
}

enter image description here

But be careful — text will be shown as is with all empty spaces and new rows!

Improve this answer

Comments

2

Instead of ' ' you can try &nbsp;

Improve this answer

1 Comment

The code i'm writing is in a .ts file not in the html file.
0

As people have commented you in other answers, the problem in your case is with the html. I recommend you to add &nbsp; instead of ' ' in your code.

if (this.city !== undefined) {
   let test = 50;
   test -= this.city.length;
   let result = 'City: ' + this.city;
   for (let i = 0; i < test; i++) {
       result += '&nbsp;';
   }
   return result + this.state;
}

Or if you prefer, you can embed your string result into <pre></pre> tags.

You can check out this page https://www.wikihow.com/Insert-Spaces-in-HTML for further information.

Improve this answer

2 Comments

The code i'm writing is in a .ts file not in the html file. Also, I tried editing my code according to what you said earlier and it didn't work. Did you word your answer assuming that I was writing my code in the html file?
Have you tried binding your variable with innerHtml tag? Like <p [innerHtml]="YOUR_VARIABLE"></p>
0

Even if you get extra spaces in string, html will not render the extra spaces. You can get the count of whitespaces needed and loop in html wherever wanted. Tested and it works.

<span *ngFor="let i of whitespacecount">&nbsp;</span>
Improve this answer

Comments

0

You can use   to create a space in typescript For example:

<h1>Hello World<h1>

can be written as

<h1>Hello &nbsp; World<h1>

This will display it as a space on the page view.

Improve this answer

Comments

0

I was facing the same kind of issue, trying to make random text having always a fixed MAX_CHAR_PER_CELL length. &nbsp; only works in html pages of Angular. if you try to print a typescript string variable including any html entity, they will be automatically escaped.

but @Parinda-Rajapaksha's solution is working. Here is a more contemporary way to do the whole thing:

    const length:number = text.length;
    if ( length == this.MAX_CHAR_PER_CELL)
    {
       return text;
    } else if ( length > this.MAX_CHAR_PER_CELL ) {
       return text.slice(0, this.MAX_CHAR_PER_CELL-3)+"...";
    } else { // length < this.MAX_CHAR_PER_CELL
       return text + "\xa0".repeat(this.MAX_CHAR_PER_CELL - length);
    }

Note: this won't give the expected result of a fixed width on a web page unless using monospaced fonts.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.