How to realize text alignment by css
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!
