CSS solves the problem of equal-width space for browsers

Many times, you want to be able to use space typesetting in HTML. But when the browser parses the HTML, it parses the contiguous space into one, so we'll use a placeholder like this.

But also not very reliable, such as space spacing is very large, then we have to add more placeholders, and the volume of the page will become very large.

Also, note that Safari's width is the space width of the set character (the default font for Safari is times), which means a Chinese character requires two placeholders.

The details are shown in the following illustration:

In fact, this is not a safari problem, but a font problem. The solution is to use the following attributes

font-family: ' XXFarEastFont-Arial '; The default font for Safari is set to "XXFarEastFont-Arial" such as Chinese and English fonts, which can be solved. Windows version of Safari font settings, you need to use the Chinese "XXFarEastFont-Arial" name rather than "SimSun" (please tell me about the reason of the brother).

But at this point, our fundamental goal is not to solve, is to avoid the use of such placeholders, and the use of "native" space. Consider the corresponding CSS properties for the white space, and learn more about the usage of white-space, then it's better to deal with.

Summary of the use of white-space to achieve equal-width space conditions, there are two. You need to set the corresponding property

White-space:pre;

Then set the equal-width characters (including equal-width spaces). In combination, that's it.

font-family: ' Song body ', SimSun;

White-space:pre;

Because of the use of the Chinese CSS name, it is necessary to consider the character encoding problem of the style in practical use. At the same time, the need for additional consideration is whether the Apple machine has "song" (or other width of the font), the brother of the Apple machine please help test.

--split--

The other way to thank ponies is to use EM units. 1em simply, it can be thought of as a character width; 5em is half a character. So, the above situation can be used to write this.

The corresponding CSS should be

. Half-word{width:.5em;}

. Two-word{width:2em;}

Tested through.

--split--

In view of these two different methods, the individual thinks should be considered according to the actual situation to adopt. Like the first method, although relying on a specific, equal-width font, but not adding additional structure, for future maintenance will be more convenient; the second approach takes more account of actual applications (and does not rely on specific, equal-width fonts) but adds additional constructs.

So, if you take into account the future maintainability, at the same time, "semantic" perspective analysis, the promotion of the first approach. and the actual application of the situation, while the need for more complex applications, the individual will choose the second type.