CSS text alignment

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.