The use of CSS text-justify properties

Source: Internet
Author: User
Grammar:

Text-justify:auto |inter-word | Newspaper | Distribute | Distribute-all-lines | Inter-ideograph

Parameters:
Auto: Allows the browser user agent to determine the justification used
Inter-word: Aligns the text by increasing the space between the words. This behavior is the quickest way to align all lines of text. Its justification behavior is not valid for the last line of a paragraph
Newspaper: aligns text by increasing or decreasing the spacing between words or letters. is the most precise format for the Latin alphabet justification
Distribute: Handling whitespace is much like newspaper, which works for East Asian documents. Especially Thailand.
Distribute-all-lines: Both ends of the hyphenation are the same way as distribute and do not contain the last line of two paragraphs aligned. Applies to ideographic documents
Inter-ideograph: Provides full justification for ideographic text. He increases or decreases the space between ideographic words and words

Description
Sets or retrieves the alignment of text within an object.
The corresponding script attribute is textjustify. Please refer to the other bibliography I have written.

Example:

div {Text-justify:auto;}

We sometimes use text at both ends of the text to align to achieve the purpose of beautifying the template. So how is the text justified and what issues to be aware of, the details are as follows:

At present, for English articles, only need to set text-align:justify; You can achieve both ends of the alignment, as in the following example:

English-Justified Setup codes

<p style= "text-align:justify;width:500px;margin:10px auto;border:1px solid red;padding:10px;" >
This is the effect of the Chinese text:Start:W3Schools is optimized for learning, testing, and training. Examples might is simplified to improve reading and basic understanding.  tutorials, references, and examples is constantly reviewed to avoid errors, but we cannot warrant full correctness of all Content. While using the this site, you agree to has read and accepted our terms of use and privacy policy. End.

If you are dealing with Chinese, you also need to add the Text-justify:inter-ideograph attribute, as in the following example:

Chinese two-pronged setup code

<p style= "text-align:justify;text-justify:inter-ideograph;width:500px;margin:10px auto;border:1px solid red; padding:10px; " >
This is the effect of Chinese text: Test text content area start: Create want information Network-front-end development column, focus on website design, front-end development. Creative Information Network Other areas of concern are--dedecms two development, label use and optimization, computer troubleshooting, learning resources sharing, development tool recommendations, Video tutorial summary, wonderful blog recommendations, social experience, emotional experience sharing, database use and several common Web project operations.

Attention:

Punctuation affects layout alignment, and by default most mainstream browsers avoid having punctuation marks at the beginning of the line, which is more complex to control.

There are spaces that are not the same, there are spaces at the end of the line will be wrapped here, punctuation marks can also be at the beginning of the next.

The following create want information network to review the CSS in the text-justify knowledge:

Text-justify: The parameters are as follows

Auto allows the browser user agent to determine the justification used

Inter-word aligns the text by increasing the space between the words. Its justification behavior is not valid for the last line of the 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 processing spaces are much like newspaper, and are suitable for East Asian documents. Thailand in particular.

Distribute-all-lines both sides of the hyphenation are the same way as distribute, and do not contain the last line of two paragraphs aligned.

The inter-ideograph provides full justification for ideographic text. He increases or decreases the space between ideographic words and words.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.