When making forms, we often encounter the alignment of two fields, such as name, cell phone number and birthplace. So we're going to use the text-align, text-justify style.
Just set text-align to justify. The situation of text-justify is complicated. Some people may not be familiar with it. The values of IE are as follows:
- auto: A two-end alignment rule that allows browser user agents to determine what to use
- inter-word: Align text by adding spaces between words. This behavior is the fastest way to align all text lines. Its alignment at both ends is invalid for the last line of a paragraph
- newspaper: Align text by adding or reducing spaces between letters or letters. It is the most accurate format for aligning the two ends of the Latin alphabet.
- Distbute: Processing spaces is much like newspaper
- Distbute-all-lines: Lines are aligned at both ends in the same way as distribute and do not contain the last line of two aligned paragraphs. Suitable for ideographic documents
- inter-ideograph: Provides complete alignment of ideographic text at both ends. He adds or reduces spaces between ideograms and words.
Small partners interested in web front end technology can be added to our learning circle, because I am not 211985, just an ordinary undergraduate student, English is not particularly good, and math is not particularly good. So I chose the front end. In my sixth year of work, I am glad that I have chosen this road. 767-273-102 autumn skirt. I worked in a goose factory, and I fooled with the entrepreneurs. I want to share my technology with you. If you are still confused, I hope to help you with some of my meagre efforts. It's a group of people with dreams. We may be in different cities, but we will go together. Front end, front end, front end
But it was first implemented as a private implementation of IE, such as text-overflow, overflow-x, etc. It was implemented very late in FF, in other words, there are strict compatibility issues. Moreover, FF and chrome need to manually insert blank or soft wrap labels between Chinese characters before coming into force, and the resistance encountered in Chrome is even greater. P>
The plan:
.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;
}
}
Running code:
<!DOCTYPE HTML>
<html>
<head>
<title>Text alignment at both ends </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.box1{
background:red;
width:30%;
}
.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;
}
}
</style>
</head>
<body>
<div class="box1">
<div class="test1">Full name</div>
<div class="test1">Name and Name</div>
<div class="test1">Name name</div>
<div class="test1">Location</div>
<div class="test1">Work unit</div>
</div>
</body>
</html>