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

Source: Internet
Author: User
Tags add join mixed split

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! )。


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.


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 ("");


-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 ("");

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.