CSS paragraph text (mixed in Chinese and English) to achieve justified justification

Today, sharing a little trick is to align both ends of the Chinese and English, just to deal with the needs of those perverts. Under normal circumstances or is not recommended, after all, using a few words JS.

The case is as follows:

The combination of Chinese characters and English paragraphs defaults to the following:

The two sides are misaligned (in general, we do not handle this situation unless the requirement or design requires that we achieve justification).

After the alignment is as follows:

Realize the idea

The general justification is the use of text-align:justify, but text-align:justify generally works only for English. (Because the CSS is designed by foreigners, foreigners in the justify judgment, is based on the words directly to the space, the Chinese two characters without space, so most of the case Text-align:justify no use, so this attribute most of the same fake! ）。

Solutions

Step one: is to add a space between Chinese characters, and then remove the space to achieve.

Add a space we use JS to achieve, first split and then join on it!

The code is as follows:

"So-and-So Haorooms blog". Split (""). Join ("");

Step two: After adding a space, the word gap becomes larger, it will be difficult to see, and then we use the CSS letter-spacing properties, the corresponding indentation.

The code is as follows:

Letter-spacing: -0.15em;

This achieves the effect of justified alignment.

Summarize

According to the above ideas, summed up, using jquery implementation code as follows:

$ ("#haorooms"). CSS ({"text-align": "Justify", "letter-spacing": " -0.15em"});

$ ("#haorooms"). html () =$ ("#haorooms"). html (). Split (""). Join ("");

Comments

-0.15em This value can be specified, according to your current cheap to set, -0.15em value is the experience gained! EM is a unit that can be seen specifically http://www.haorooms.com/post/css_unit_calc

Of course, can also use pure JS to achieve this effect! The code is as follows:

var Box=document.getelementbyid ("Haorooms");

Box.style.textAlign = "Justify";

box.style.letterSpacing = "-.15em";

box.innerhtml = Box.innerHTML.split (""). Join ("");