May 04, 2021 CSS
1. The CSS text is aligned at both ends
2. text-justify(IE) Basic syntax
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:
text-align: Justify (Firefox);
text-justify:inter-ideograph (IE)
If necessary, you can read the CSS text-align properties section first.
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
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
text-align
text-justify
style.
text-align
set directly to justify, and
text-justify
a relatively complex situation.
<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
/ * 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;
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:
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%; }
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.
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%; }
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.