When making forms, we often encounter situations where the upper and lower fields are aligned, such as name, mobile number, and birthplace. So we're going to use the text align, text justify style.
Just set text align to justify directly. The situation of text justify is complicated. Some people may not be familiar with it. IE values are as follows:
- auto: allows browser user agents to determine the alignment rule to use
- Inter word: aligns text by adding spaces between words. This behavior is the fastest way to align all lines of text. Its justify behavior is not valid for the last line of the paragraph
- Newspaperalign text by increasing or decreasing the space between words or letters. Is the most accurate format for Latin alphabet justification
- distribute: Handling spaces is much like newspaper ing
- Distribute all lines: align lines at both ends in the same way as distribute, and also do not contain the last line of two aligned paragraphs. For ideographic documents
- Inter ideograph: provides full justification for ideographic text. He added or reduced spaces between ideographs and words
But it is the first private implementation of IE, such as text overflow, overflow-x and so on. It is implemented late in FF, in other words, it has strict compatibility problems. In addition, FF and chrome need to manually insert blank or soft line feed labels between Chinese characters to take effect. 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;
}
}
web Front end development learning Q-q-u-n: 784783012 ，Share learning methods and small details that need to be paid attention to, keep updating the latest tutorials and learning methods (detailed front-end project practical teaching video)Run code:
<!DOCTYPE HTML>
<html>
<head>
<title>Align text 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</div>
<div class="test1">Name name</div>
<div class="test1">Location</div>
<div class="test1">Work unit</div>
</div>
</body>
</html>
web Front end development learning Q-q-u-n: 784783012 ，Share learning methods and small details that need to be paid attention to, keep updating the latest tutorials and learning methods (detailed front-end project practical teaching video)