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:
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
