Add spaces between Html and JS strings

background

Have you ever encountered during project development that when you want to align both ends of the label, setting text-align: justify does not take effect? Or maybe you really need to manually add spaces somewhere, but don’t know where to start? When you are confused (What the hell! I can’t even know CSS???), it doesn’t matter! You might as well change your mind and try adding spaces in the middle of html or js strings! As the saying goes: It doesn’t matter whether the cat is white or black, as long as it catches mice, it is a good cat! Now let me show you a complete collection of space methods that I have compiled, ensuring that you will know it at a glance and it will be destroyed at a glance! Hope it helps everyone~

text

1. Add special escape characters (including spaces) to Html

Normally, Html will automatically intercept extra spaces. So no matter how many spaces you add, they will be parsed into one space. For example, if you add 6 spaces between two words, Html will cut off 5 and keep only one! So, in order to add spaces to the page, you can try this~

2. Add spaces in Js

1.String.fromCharCode(32) The parameter is the number after #, which can output multiple spaces .

For example: console.log(1+String.fromCharCode(32)+String.fromCharCode(32)+2) // 1 (two spaces) 2

2.\xa0 is an extended character set character in latin (ISO/IEC_8859-1, Latin letters), representing the blank character nbsp (non-breaking space).

For example: console.log(1+\xa0\xa0\xa0+2) // 1 (three spaces) 2

It can also be used in html, but becomes  .

3.U+0020 is a Unicode character and its usage is the same as \xa0.

For example: console.log(1+ '\u0020\u0020\u0020\u0020' +2) // 1 (four spaces) 2

4.\x20 Standard keyboard code value table - hexadecimal.

For example: console.log(1+ '\x20\x20\x20\x20\x20' +2) // 1 (five spaces) 2

5.%20 To decode URI, you need to use decodeURIComponent.

For example: console.log(1+ decodeURIComponent('%20')+decodeURIComponent('%20') +2) // 1 (two spaces) 2

6.\t This is equivalent to pressing the tab key, one is equivalent to 4 spaces.

For example: console.log(1+ '\t\t\t\t' +2) // 1 (sixteen spaces) 2

Before rectification

After rectification

end

This is my first post ~ I saw that there was no similar article on the Nuggets, so I tried to write it. I hope this article can help everyone. It’s really not that I can’t use CSS (manual dog head). Everyone is welcome to comment, and any shortcomings are welcome to be corrected!

at last

I compiled a set of "Interview Guide for Front-End Major Companies", which includes HTML, CSS, JavaScript, HTTP, TCP protocol, browser, VUE, React, data structure and algorithm. There are 201 interview questions in total, and I have made an answer for each question. Answer and analysis.

Friends in need can click on the card at the end of the article to receive this document and share it free of charge

Part of the document display:



The length of the article is limited, so the following content will not be shown one by one.

Friends in need can click on the card below to get it for free

Guess you like

Origin blog.csdn.net/web2022050901/article/details/129755147