Detailed explanation of the use of css text-justify attribute

Syntax:

text-justify : auto |inter-word | newspaper | distribute | distribute-all-lines | inter-ideograph

Parameters:
auto: Allows the browser user agent to determine the alignment rule used
inter-word: Aligns text by adding spaces between words . This behavior is the fastest way to align all lines of text. Its justified behavior has no effect on the last line of a paragraph
newspaper: Align text by increasing or decreasing the space between words or letters. It is the most accurate format for aligning both ends of the Latin alphabet
distribute: It handles spaces much like newspaper and is suitable for East Asian documents. Especially Thailand
distribute-all-lines: The method of aligning lines at both ends is the same as distribute, and it also does not include the last line of two aligned paragraphs. Applies to ideographic documents
inter-ideograph: Provides full justification for ideographic text. He increases or decreases the space between ideograms and words

Description:
Sets or retrieves the alignment of text within the object .
The corresponding script feature is textJustify. Please see other books I have written.

Example:

div {text-justify : auto; }

We sometimes use text alignment at both ends to beautify the template. So how to achieve text alignment at both ends and what issues should be paid attention to, the details are as follows:

Currently, for English articles, you only need to set text-align:justify; to achieve both End-aligned, as in the following example:

Setting code for English aligned ends

<p style="text-align:justify;width:500px;margin:10px auto;border:1px solid red;
padding:10px;">

This is the effect of the English text:
Start:
W3Schools is optimized for learning, testing, and training. 
Examples might be simplified to improve reading and basic understanding.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. 
While using this site, you agree to have read and accepted our terms of use and privacy policy.
End.

If you are dealing with Chinese, you also need to add text-justify:inter-ideographAttribute, as the following example:

Chinese two-end alignment setting code

<p style="text-align:justify;text-justify:inter-ideograph;width:500px;margin:10px auto;
border:1px solid red;padding:10px;">

这是中文文字的效果：
测试文字内容区开始：
创想信息网—前端开发栏目，关注网站设计、前端开发。
创想信息网其他关注方向有——dedecms二次开发、标签使用及优化，计算机故障排除，学习资源分享，
开发工具推荐，视频教程汇总，精彩博文推荐，社会经验、情感经历分享、数据库使用以及几个常见的web项目运维。

Note:

Punctuation marks will affect layout alignment. By default, most mainstream browsers The processor will prevent punctuation marks from occupying the beginning of the line. Controlling this problem is more complicated.

The situation is different if there are spaces. If there are spaces at the end of the line, the line will be automatically wrapped here, and the punctuation mark can also be at the beginning of the next line.

The following Chuangxiang Information Network will review the knowledge of text-justify in CSS:

text-justify: The parameters are as follows

auto allows the browser user agent to determine the use Alignment rules

inter-word aligns text by adding spaces between words. Its justifying behavior has no effect on the last line of a paragraph.

newspaper Increase or decrease spaces between words or letters to align text. Is the most precise format for justifying the Latin alphabet.

distribute handles spaces much like newspaper and is suitable for East Asian documents. Especially Thailand.

distribute-all-lines aligns lines in the same way as distribute, and also does not include the last line of two aligned paragraphs.

inter-ideograph provides full justification for ideographic text. He adds or subtracts ideograms and spaces between words.

The above is the detailed content of Detailed explanation of the use of css text-justify attribute. For more information, please follow other related articles on the PHP Chinese website!