            Coding With Fun

Home Docker Django Node.js Articles Python pip guide FAQ Policy

CSS is tying grammar and code instance teaching at both ends

May 04, 2021 CSS

Table of contents

1. The CSS text is aligned at both ends

2. text-justify(IE) Basic syntax

3. The syntax is valued

4. Apply an instance of the code

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

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 Top of CSS Reset Code * / HTML {Color: # 000; Background: #fff; Font-Family: Microsoft Yahei, Sans-Serif, Arial, 'Song Body';} 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 : #; OUTLINE: NONE;} / * 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} 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: # \} Input, Button, Textarea , Select, Optgroup, Option {Font-Family: inherit; font-size: inherit; font-style: inh 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-adjuth: none; -Webkit-Transform-style: preserve-3d;} * {- webkit-tap-highlight-color: RGBA (0,0,0,0);} / * form processes the style of forms from here * / form {width: 430px; margin: 20px auto 0;} div}

width:430px;

height:40px;

line-height:40px;

clear:both;

Word-spacing: -1em; / * Adjust the text to prevent the word spacing over the same time from alignment with both ends * /

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 with Chrome * / div span: after {content: "."; Display: inline-block; width: 100%; Overflow:Hidden; height: 0;}} span {float: LEFT; Width: 40px; Line-height: 40px; margin-right: 10px;} strong {float: left; width: 140px; height: 40px; line-Height: 40px; Margin-Left: 10px; Background: #ccf;} infut [type = text] {float: left; width: 200px; height: 20px; margin: 10px 0;} infut [type = password] {Float: lying; width: 200px; height: 20px; margin: 10px 0;} infut [type = button] {color: # 00f; width: 100px; height: 30px;} .reg {text-align: center; margin: 20pxAuto 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;">
Middle is English

</div>

Or

<div align="justify">
Middle is English
</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;">
Middle is English
</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.