How to use css to align text at both ends
This article mainly shows you "how to use css to achieve text alignment", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use css to achieve text alignment" this article.
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 use css to achieve text alignment at both ends". 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!
