During form creation, we often encounter alignment of the upper and lower fields, such as name, mobile phone number, and place of birth. In this case, we need to use the text-align and text-justify styles.
Text-align can be set to justify directly. The text-justify situation is complicated. Some people may be unfamiliar with it. The values of IE are as follows:
- Auto: allows the browser user agent to determine the two-end alignment rules used
- Inter-word: Align text by adding spaces between words. This behavior is the fastest way to align all text rows. The alignment at both ends of the paragraph is invalid for the last line of the paragraph.
- Newspaper: Align text by adding or removing spaces between words or letters. Is the most precise format used for alignment at both ends of the Latin alphabet
- Distribute: Processing spaces is similar to newspaper. It is applicable to East Asian documents. Especially Thailand
- Distribute-all-lines: the two ends are in the same way as distribute, and they do not contain the last line of the two section alignment. Applies to ideographic documents
- Inter-ideograph: provides full two-end alignment for ideographic text. He adds or removes spaces between ideographic words and words.
However, it was first implemented as a private Implementation of IE, such as text-overflow and overflow-X. It was implemented very late in FF, in other words, there was a strict compatibility problem. And ff, chrome needs to manually insert blank or soft line feed labels between Chinese characters to take effect, the resistance encountered in Chrome is even greater. P>
I have been chatting with friends in the QQ Group over the past two days. Finally, I will give an ultimate solution:
. test1 {text-align: justify; text-justify: distribute-all-lines;/* ie6-8 */Text-align-last: justify; /* ie9 */-moz-text-align-last: justify;/* FF */-WebKit-text-align-last: justify; /* chrome 20 + */} @ media screen and (-WebKit-Min-device-pixel-ratio: 0) {/* chrome */. test1: After {content :". "; display: inline-block; width: 100%; overflow: hidden; Height: 0 ;}
</P> <p> <! Doctype HTML> <br/> <pead> <br/> <title> align both ends of the text by situ zhengmei </title> <br/> <Meta HTTP-equiv = "Content-Type" content = "text/html; charset = UTF-8 "> </P> <p> <style> </P> <p>. box1 {<br/> Background: red; <br/> width: 30%; <br/>}< br/>. test1 {<br/> text-align: justify; <br/> text-justify: distribute-all-lines; /* ie6-8 */<br/> text-align-last: justify;/* ie9 */<br/>-moz-text-align-last: justify; /* FF */<br/>-WebKit-text-align-last: justify; /* chrome 20 + */<br/>}< br/> @ media screen and (-WebKit-Min-device-pixel-ratio: 0) {/* chrome */<br/>. test1: After {<br/> content :". "; <br/> display: inline-block; <br/> width: 100%; <br/> overflow: hidden; <br/> Height: 0; <br/>}< br/> </style> </P> <p> </pead> <br/> <body> <br/> <Div class = "box1"> <br/> <Div class = "test1"> last name </div> <br/> <Div class = "test1"> last name last name </div> <br/> <Div class = "test1"> last name </div> <br/> <Div class = "test1"> location </div> <br/> <Div class = "test1"> Work order bit </div> <br/> </div> </P> <p> </body> <br/> </ptml> <br/>
RunCode