Align CSS text on both sides

When making a form, we often encounter situations where the top and bottom two fields are aligned, such as name, cell phone number, and place of birth. So we'll have to use text-align, text-justify style.

Text-align directly set to justify on the line, text-justify the situation is complicated, maybe someone is not familiar with it. The values of IE are as follows:

• Auto: Allows the browser user agent to determine the justification used
• Inter-word: Aligns the text by increasing the space between the words. This behavior is the quickest way to align all lines of text. Its justification behavior is not valid for the last line of a paragraph
• Newspaper: aligns text by increasing or decreasing the spacing between words or letters. is the most precise format for the Latin alphabet justification
• Distribute: Handling whitespace is much like newspaper, which works for East Asian documents. Especially Thailand.
• Distribute-all-lines: Both ends of the hyphenation are the same way as distribute and do not contain the last line of two paragraphs aligned. Applies to ideographic documents
• Inter-ideograph: Provides full justification for ideographic text. He increases or decreases the space between ideographic words and words

But it was originally implemented as a private implementation of IE, such as text-overflow, overflow-x, etc., at FF very late, in other words there are strict compatibility issues. and ff,chrome need to manually insert blank or soft line labels between Chinese characters to take effect, and the resistance in chrome is even greater. P>

1 . Test1{2 text-align:Justify;3 text-justify:Distribute-all-lines;/*ie6-8*/4 Text-align-last:Justify;/*IE9*/5 -moz-text-align-last:Justify;/*FF*/6 -webkit-text-align-last:Justify;/*Chrome 20+*/7}8 @media screen and (-webkit-min-device-pixel-ratio:0){/*Chrome*/9 . Test1:after{Ten content: "."; One Display:Inline-block; A width:100%; - Overflow:Hidden; - Height:0; the} -             }