Ways to achieve Chinese alignment using spaces in CSS code

Use some spaces to achieve a Chinese alignment or width equal to the number. See table below:

of which   and &emsp, because of a certain super features, so that it can board the web session stage! What characteristics? As shown in the above table bold, 1. transparent; 2. The width is exactly the same as Chinese 1:2 and 1:1, so, some of the Chinese layout alignment, directly can be used to adjust the two spaces, such as:

xml/html code to copy content to clipboard

1. <ul>
2. <li class= "Li" > Name: <input type= "Text"/></li>
3. <li class= "Li" > Mobile number: <input type= "Text"/></li>
4. <li class= "Li" > E-mail: <input type= "Text"/></li>
5. </ul>

The result is easy to achieve the equal-width justified effect of 2 words/3 characters/4 characters in Chinese:

You can ruthlessly click here: space in the text layout of the application demo

That's the old text, so why is this a cliché now?

Because I just happened to turn to this old text, found that 1 days of visits only 10, feel that the article, such as falling limbo, is very pitiful, indeed a sigh of regret. So, decided to add more material, repackaged, again to the market, see if you can set off a little waves.

Another point is that the above blank word Fu Zhengwen alignment method in IE6 can not be completely compatible, and the year 11 years, IE6 in China is still very arrogant, so, many small partners later did not insist. And now, the Red Lantern hanging High, IE6 early Hugh Fall back to her mother, no obstruction, this method may be able to set off a little waves.
Space new members & #x3000;

What does "fork 3,000" mean? Haha, is actually a full corner space.

Chinese fonts are equal width, the width of a full-width space is the width of an ordinary Chinese. Therefore, the above demo &emsp; space to replace the full corner of the space can also drop!

However, we can not directly in the page to play a full space, because most of the editor in the Hollow is transparent drop, it is easy to be deleted, in addition, HTML compression, the space is likely to be killed! Supposed You need to convert the writing form.

On a Web page, there are generally 3 types of writing:

1. Direct, such as Sogou input "copyright"-?.
   Web character,&copy;
   CharCode said:& #xa9;

The above &ENSP; &emsp; is a web character with a specific name. However, forgive me know, I do not know whether the full-width spaces have a corresponding & + keyword, so, the use of tools turned to charcode characters, that is, here & #x3000, also known as "fork 3,000"!

Wait a minute, you just said the tool, what tool!?

Ha, this classmate is very keen, I have a possession of a small tool, you can convert any character to HTML recognition format, if interested, you can ruthlessly click here: any character converted to HTML Recognition Format Tool page

Using this tool, you will find that &ENSP, &emsp; was originally a neighboring sibling:

• &ensp; →& #x2002;
  &emsp; →& #x2003;

More content

When Chinese and English are mixed, using &ENSP, &emsp; and other spaces to achieve the perfect alignment of the colon is still difficult, unless the English use of the same width font, so we can use the normal &nbsp; space to do the width of the English character adjustment.

Re-science point about the practical knowledge of the character bar:
1. HTML character output using & #x配上charCode值;
2. In JavaScript file to prevent garbled escape, it is U with charcode value;
3. And in CSS files, such as CSS pseudo element content attributes, directly use with charcode value.

Therefore, in html/js/css to relay the meaning of "I" the Chinese characters, respectively:

• & #x6211;
  u6211, such as Console.log (' u6211 ');
  6211, such as. xxx:before {content: ' 6211 ';}

Taking into account the direct & #x3000; This form of exposure to HTML may allow auxiliary devices such as screen readers to read and thus affect the normal reading stream, so we can further optimize the use of tags, using pseudo elements such as:

CSS code to copy content to clipboard

1. . half:before {content: ' 2002 '; Speak:none}
2. . full:before {content: ' 2003 '; Speak:none}

In this way, the placeholder space character cannot be read or selected.