About text-justified processing!

<Div>    <P>Control group 1: Document Flow<span></span></P>    <P>Control Group 2: Justified (this group supports Google)<span></span></P>    <P>Control Group 3: Justified (this group supports Google, Firefox, ie9+)<span></span></P>    <P>Control Group 4: We do not guarantee the correctness of the content. The risks associated with the use of this site are not related to this site. All content is for testing only and is not responsible for any legal issues or risks. (This group supports Google, Firefox, ie9+)<span></span></P></Div>

@charset "UTF-8";/** * @authors Pich ([email protected]) * @date 2016-04-19 22:11:25 * @version 0.1*/Div{background:#aaa; }P:nth-last-child (4){ }P:nth-last-child (3){text-align:Justify; }P:nth-last-child (2){text-align:Justify; }p:nth-last-child (1){text-align:Justify; }span{Display:Inline-block;/ * Opera * /Padding-left:100%; }

Code Analysis:

Text-align:justify (

The value justify the horizontal alignment property, which brings some of its own problems.

A value of justify enables you to align both ends of the text. In justified text, the left and right ends of the line of text are placed on the inner bounds of the parent element. Then, adjust the spacing between the words and the letters so that the lengths of the lines are exactly equal. You may have noticed that justified justification is common in the printing world. But in CSS, you need to do more thinking.

It is up to the user agent (not CSS) to determine how the justified justification stretches to fill the space between the left and right boundaries of the parent element. For example, some browsers may only add extra space between words, while others may evenly distribute extra space between letters (although the CSS specification specifically states that if the Letter-spacing property is specified as a length value, " The user agent cannot further increase or decrease the space between characters "). There are also some user agents that may reduce the space of some rows and squeeze the text closer together. All of these practices affect the appearance of an element or even its height, depending on how many lines of text are affected by the alignment selection of the user agent.

CSS also does not specify how hyphens should be handled (note 1). Most of the justified text uses hyphens to separate long words on two lines, narrowing the gap between words and improving the appearance of the lines. However, because the CSS does not define a hyphen behavior, the user agent is unlikely to automatically add hyphens. As a result, in CSS, both ends of the aligned words do not look good to print, especially the elements may be too narrow, so that each line can only put down a few word. Of course, the use of narrow design elements is possible, but beware of the corresponding shortcomings.

Note 1:CSS does not describe how to handle hyphens, because different languages have different hyphenation rules. The spec did not attempt to reconcile some of the most likely imperfect rules, but simply not to mention the problem.

）

padding:% (Specifies the padding based on the percentage of the parent element's width.) ）

padding-left:100%;(is the 100% width of the parent element: that is, the left inner margin of the element fits the right edge of the parent element)

Reference:

True available CSS text justified at both ends

http://blog.163.com/lgh_2002/blog/static/440175262013580153222/

3 Ways to Justify "original" CSS

Http://www.cnblogs.com/PeunZhang/p/3289493.html

About text-justified processing!