Posts in current category

CSS is tying grammar and code instance teaching at both ends


May 04, 2021 02:00 CSS


Table of contents


We are not unfamiliar with "two-end alignment", in word, powerpoint, outlook and other interface toolbar, there are two-end alignment (dispersed alignment) function buttons, but usually do not use too much, from the editing habits are basically left-aligned, center-aligned, right-aligned way to align the text or modules of the page, and when we do forms often encounter such as name, In cases where the cell phone number, place of birth, and other fields are different in length, you need to use css to align the words of the two fields to make the overall form look more coordinated, as shown in the following image:


CSS is tying grammar and code instance teaching at both ends


The CSS text is aligned at both ends

text-align: Justify (Firefox);


text-justify:inter-ideograph (IE)


If necessary, you can read the CSS text-align properties section first.

text-justify(IE)
Basic syntax

text-justify : auto | d istribute | d istribute-all-lines | d istribute-center-last | i nter-cluster | i nter-ideograph | i nter-word | k ashida | newspaper


The syntax is valued

auto The default. Allows the browser proxy user to determine which throes are used

distribute : Processing spaces is much like a newspaper and is useful for East Asian documents. Especially Thai

distribute-all-lines way the two ends align the lines with

distribute the same and does not contain the last line of two aligned paragraphs. Suitable for esody documents

distribute-center-last : implemented

inter-cluster Adjusts the lines of text without space between words. This mode of adjustment is used to optimize Asian language documentation

inter-ideograph full throosy alignment for ideographic text. He increases or decreases the space between dicings and words

inter-word Aligns text by increasing the space between words. T he behavior is the fastest way to align all lines of text. Its two-ended alignment behavior is not valid for the last line of the paragraph

kashida the text by lengthing the characters of the selected point. T his mode of adjustment is specifically for Arabic scripting languages. IE5.5 plus support is required

newspaper : text by increasing or decreasing spaces between words or letters. i s the most precise format for aligning the two ends of the Latin alphabet

Apply an instance of the code

With the registration form shown above, we're going to text-align text-justify style. text-align set directly to justify, and text-justify a relatively complex situation.
The HTML code is as follows:

<form>

<div>

<span>用 户 名</span>

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

<strong></strong>

</div>

<div>

<span>密 码</span>

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

<strong></strong>

</div>

<div>

<span>确 认 密 码</span>

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

<strong></strong>

</div>

<div>

<span>兴 趣 爱 好</span>

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

<strong></strong>

</div>

<div class='reg'>

<input type="button" value='点此注册' name="" />

</div>

</form

Note that there is a space between no two characters

Style code:

/*CSS reset 顶部为css的重置代码*/ html{color:#000;background:#FFF;font-family:Microsoft YaHei,sans-serif,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;}/*此处待添加默认链接颜色*/ 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 从此处起为表单的样式处理*/ form{width:430px;margin:20px auto 0;} div{

width:430px;

height:40px;

line-height:40px;

clear:both;

word-spacing:-1em;/*调整文本,以防止使用两端对齐之后字间距过大*/

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*/ 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;}

Using text-align:justify; and text-justify:inter-ideograph; Setting the effect of aligning the two ends of the text, whether Chinese, doesn't work under IE or chrome. T he solution is as follows:

Add style code:

div.justify

{text-align: justify; width:200px; font-size:15px; color:red;

border:1px solid blue; height:18px;}

div.justify > span

{display: inline-block /* Opera */;

padding-left: 100%; }


Try it out . . .
Effect diagram:
CSS is tying grammar and code instance teaching at both ends

As you can see from the effect map, in addition to text-align:justify element, you need to add an empty span element span it and apply the style. I n addition, Chinese must also be separated by spaces, otherwise there is no effect of alignment. Every word in English is separated by spaces, so it's all right.

CSS is tying grammar and code instance teaching at both ends

The CSS code for the English text is aligned at both ends

The code is as follows:
<div style="text-align:justify;">
中间是英文资料
</div>
Or
<div align="justify">
中间是英文资料
</div>
This way the English display can be aligned and the words will not break.
But sometimes we need a word break to add a "-" to the back, how do we do that? T he code is as follows:
<div style="text-align:justify;text-justify:inter-ideograph;">
中间是英文资料
</div>
That's all right, but this code seems to only work in IE.
--------------------------------------------------------------------

If the above code doesn't work, you can refer to the following example:

div.justify { text-align: justify; width:200px; font-size:15px; color:red; border:1px solid blue; height:18px;}

div.justify > span { display: inline-block /* Opera */; padding-left: 100%; }


Try it out . . .
In addition to the text-align:justify block-level element, you need to add an span it and apply the style. I n addition, Chinese must also be separated by spaces, otherwise there is no effect of alignment. Every word in English is separated by spaces, so it's all right.