CSS Text Justification application instance

When making a form, we often encounter a situation where the top and bottom two fields are aligned, such as name, mobile number, birthplace. So we're going to use text-align, text-justify style.
Text-align directly set as justify on the line, text-justify situation is relatively more complex

the value of IE is as follows:

Auto: Allows the browser user agent to determine the justification for use
Inter-word: Aligns text by adding spaces between words. This behavior is the quickest way to align all lines of text. Its justified behavior is not valid for the last line of a paragraph
Newspaper: Increases or decreases the space-aligned text between words or letters. is the most precise format used for the Latin alphabet justification
Distribute: Working with spaces is much like newspaper, which applies to East Asian documents. Especially Thailand
Distribute-all-lines: The hyphenation is the same way as distribute and does not contain the last line of two aligned paragraphs. Apply to Ideographic Document
Inter-ideograph: Provides full justification for ideographic text. He adds or decreases the space between the ideographic word and the word
But it was first as a private implementation of IE, such as Text-overflow, Overflow-x, and so on, in the FF very late, in other words, strict compatibility issues.
and ff,chrome need to manually inserted between Chinese characters or soft line-wrapping labels to take effect.

Application Example:

The code is as follows:

Copy Code code as follows:


<form>


<div>


<span> user name </span>


<input id= ' username ' type= ' text ' name= ' "/>"


<strong></strong>


</div>


<div>


<span> Password </span>


<input type= "password" name= ""/>


<strong></strong>


</div>


<div>


<span> Confirm Password </span>


<input type= "password" name= ""/>


<strong></strong>


</div>


<div>


<span> Hobbies </span>


<input type= "text" name= ""/>


<strong></strong>


</div>


<div class= ' reg ' >


<input type= "button" value= ' dot this registration ' name= '/>


</div>


</form

Notice that there is a space between the two characters

Style Code:

Copy Code code as follows:

/*CSS Reset the top for CSS reset code/html{color: #000; background: #FFF; font-family:microsoft yahei,sans-serif,arial, ' Arial ';} body, Div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td , Strong{padding:0;margin:0;font-family:microsoft yahei,sans-serif,arial;} table{border-collapse:collapse; border-spacing:0;} fieldset,img{border:0; a{text-decoration:none; color:#; outline:none;} * * Here to add the default link color/a:hover{text-decoration:none;color: #cb1114}; Var,em,strong{font-style:normal;} Address,caption,cite,code,dfn,em,strong,th,var, Optgroup{font-style:inherit; Font-weight:inherit;} Del,ins{text-decoration:none;} li{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100% ; font-weight:normal;} Q:before,q:after{content: ';} abbr,acronym{border:0;font-variant:normal;} sup{vertical-align:baseline;} sub{ Vertical-align:baseline;} Legend{color: #000;} input,button,textarea,select,optgroup,option{font-family:inherit; font-size:inherit; Font-style:inHerit;font-weight:inherit;} input,button,textarea,select{*font-size:100%; clear {Clear:both;height:0px;overflow:hidden;} body{- Webkit-user-select:none;-webkit-text-size-adjust:none;-webkit-transform-style:preserve-3d;} *{-webkit-tap-highlight-color:rgba (0,0,0,0);} /*form from this place for the form's style processing * * form{width:430px;margin:20px auto 0;} div{


width:430px;


height:40px;


line-height:40px;


Clear:both;


word-spacing:-1em;/* adjusts the text to prevent the word spacing from being too large when justified/


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) {/* compatible chrome*/div span:after{content: "."; display:inline-block; width:100%; Overflow:hidden; height:0; } span{float:left;width:65px;height:40px;line-height:40px;margin-right:10px;} strong{float:left;width:140px; Height:40px;line-height:40px;margin-left:10px;background: #ccf;} input[type=text]{float:left;width:200px;height:20px;margin:10px 0;} input[type=password]{float:left;width:200px; height:20px;margin:10px 0;} Input[type=button]{color: #00f; width:100px;height:30px; reg{text-align:center;margin:20px auto 0;}