Use text-align:justify to align content with Internet Explorer and mainstream browser-compatible methods

If you do not like to see the analysis process, you can skip to the end to see the final compatibility scenario

Prehistoric methods:

The previous implementation of justification is this:

<Pclass= "Box1">Dense&emsp;&emsp;Code</P><Pclass= "Box1">Use&emsp;Households&emsp;Name</P><Pclass= "Box1">Body&emsp;Report&emsp;Certificate&emsp;No.</P>

The effect is this:

Then slowly add &emsp or to adjust. Primitive, rude and inefficient. Em... Should abandon ...

Modern Way:

Since the discovery of text-align:justify found that the original still have this operation.

<ul>    <Li>Password</Li>    <Li>User name</Li>    <Li>ID number</Li></ul>

ul Li {    width: 120px;     text-align: justify;}

With anticipation, the result is :

？？？ is not justified, how can be invalid???

The original is this:

(1) text-align:justify does not handle lines that force interrupts, nor does it handle the last line within the block . In layman's terms, this property does not work when only one line is displayed, or it uses word-break: break-all; This force-wrapping property is also not working the.

(2) If the content is more than one line, it is justified in addition to the last line.

Q: So when only one row is displayed, how can it be left and right justified?

Method One: Add a label to the content that is used for the placeholder, so that the content is in the first row, the effect can be achieved:

<ul>    <Li>Password<Pclass= "ZW"></P></Li>    <Li>User name<Pclass= "ZW"></P></Li>    <Li>ID number<Pclass= "ZW"></P></Li></ul>

ul Li {    width: 120px;     text-align: justify;} . ZW {    display: inline-block;     width: 100%;}

This results in the following:

Why is the content effect implemented, but the following will be more blank? Setting ZW element height:0 does not work ... I estimate that the cause of the gap is Display:inline-block; So how to solve it?

At this point only set the height of Li , such as adding height:40px;line-height:40px to Li ; .

The results are as follows:

This solves the problem of whitespace.

Note: If you set height only, do not set line-height, when the height setting value is a bit small, such as 20, or can not see the blank, but the setting is a bit large, such as 40, the white space will appear, but this blank is not a placeholder for the blank, but The content is not vertically centered, leaving the remaining div blank .

So it's best to line-height when setting the height.

Method Two: Use: After pseudo-elements (IE7 and below do not support pseudo-classes)

<ul>    <Li>Password</Li>    <Li>User name</Li>    <Li>ID number</Li></ul>

ul Li {    width: 120px;     height: 40px;     line-height: 40px;     text-align: justify;} ul Li:after {    content: ';     display: inline-block;     width: 100%;}

Effect:

(1) As with the above effect, the blank part can also be avoided by setting height and line-height.

(2) The advantage of this method is that it is less of a placeholder tag.

Method Three: Use the text-align-last:justify property

<ul>    <Li>Password</Li>    <Li>User name</Li>    <Li>ID number</Li></ul>

ul Li {    width: 120px;     text-align: justify;     text-align-last:Justify}

Effect:

(1) This method uses the text-align-last:justify property, so that only two properties can be used to achieve the effect of two-pronged alignment

(2) text-align-last:justify This property is not compatible.

(3) Such results can be displayed correctly on Google and Firefox, but not in other browsers. Because most browsers want to make both ends justify, you need to insert blanks between the text, such as spaces .

As a result, the Ultimate Compatibility method is compatible with multiple browsers:

<ul>    <Li>Password</Li>    <Li>User name</Li>    <Li>ID number</Li></ul>

 ul li  { width :  120px ; :  40px ;  Line-height :  40px ;  Text-align :  justify ;  Text-align-last : justify }ul li:after  { content :  ";  display :  Inline-block ; :  100% ;} 

(1) Note that there are spaces between each word , this is important, important, very important, and only a single space on the line, multiple spaces do not affect. Without this space, compatibility is poor, basically only Google and Firefox support.

(2) This method is compatible with IE7 and above, and there are other browsers. IE6 not test, so dare not to jump to conclusions.

(3) Multi-line content can also use the same method, but the last line if you do not add a space, or do not process, but the default is left-aligned.

(4) Li this label to set List-style:none , remove the default properties, or when there is only one line, there will be no left and right alignment, but similar to the correct alignment of the bug ...