Shulou(Shulou.com)06/01 Report--

Editor to share with you how to achieve css text alignment, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

When making a form, we often encounter the situation of aligning the upper and lower fields, such as name, mobile phone number, and place of birth. So we're going to use the text-align,text-justify style.

Text-align can be directly set to justify, and the situation of text-justify is complicated. Some people may not be familiar with it. The values of IE are as follows:

Auto: allows browser user agents to determine the alignment rules used at both ends

Inter-word: aligns text by adding spaces between words. This behavior is the fastest way to align all lines of text. Its two-end alignment behavior has no effect on the last line of the paragraph

Newspaper: aligns text by increasing or decreasing the spaces between words or letters. Is the most accurate format for alignment at both ends of the Latin alphabet

Distribute: handles spaces much like newspaper

Distribute-all-lines: lines are aligned at both ends in the same way as distribute, nor does it include the last line of two paragraph-aligned paragraphs. Suitable for ideographic documents

Inter-ideograph: provides full alignment of ideographic text. He increases or decreases the space between ideographic words and words

But it was first implemented as a proprietary implementation of IE, such as text-overflow,overflow-x, and was implemented very late in FF, in other words, with strict compatibility issues. And FF,chrome needs to manually insert white space or soft newline tags between Chinese characters to take effect, and the resistance encountered in chrome is even greater. P >

Scheme:

.test1 {

Text-align:justify

Text-justify:distribute-all-lines;/*ie6-8 percent /

Text-align-last:justify;/*ie9*/

-moz-text-align-last:justify;/*ff*/

-webkit-text-align-last:justify;/*chrome20+*/

}

@ mediascreenand (- webkit-min-device-pixel-ratio:0) {/ * chrome*/

.test1: after {

Content: ".

Display:inline-block

Width:100%

Overflow:hidden

Height:0

}

}

Run the code:

Align both ends of the text

.box1 {

Background:red

Width:30%

}

.test1 {

Text-align:justify

Text-justify:distribute-all-lines;/*ie6-8 percent /

Text-align-last:justify;/*ie9*/

-moz-text-align-last:justify;/*ff*/

-webkit-text-align-last:justify;/*chrome20+*/

}

@ mediascreenand (- webkit-min-device-pixel-ratio:0) {/ * chrome*/

.test1: after {

Content: ".

Display:inline-block

Width:100%

Overflow:hidden

Height:0

}

}

Name

Name

Name

Location

Work unit

The above is all the content of the article "how to align the text at both ends of the css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.