CSSのtext-justify属性の使い方を詳しく解説

黄舟
リリース: 2017-06-20 14:13:25
オリジナル
4273 人が閲覧しました

構文:

text-justify : auto |inter-word | newspaper | distribute | distribute-all-lines | inter-ideograph
ログイン後にコピー

パラメータ:
auto: ブラウザーのユーザーエージェントが使用する位置揃えルールを決定できるようにします。
inter-word: 単語の間にスペースを追加してテキストを配置します。この動作は、テキストのすべての行を揃える最も速い方法です。両端揃えの動作は、段落の最後の行には影響しません。
新聞: 単語または文字間のスペースを増減してテキストを配置します。ラテン文字の両端を揃える最も正確な形式です。
distribute: スペースを新聞のように扱い、東アジアの文書に適しています。特にタイでは
distribute-all-lines: 行の両端を揃える方法はdistributeと同じで、揃えた2つの段落の最後の行も含めません。表意文字ドキュメントの場合
inter-ideograph: 表意文字テキストの完全な位置揃えを提供します。表意文字と単語の間のスペースを増減します

説明:
オブジェクト 内のテキストの配置を設定または取得します。 対応するスクリプト機能は textJustify です。私が書いた他の本もご覧ください。

例:

div {text-justify : auto; }
ログイン後にコピー

テンプレートを美しくするために、両端のテキストの配置を使用することがあります。では、テキストの配置はどのように行われ、どのような問題に注意する必要があるのでしょうか? 詳細は次のとおりです。

現在、英語の記事の場合、配置を実現するには

text-align:justify; を設定するだけで済みます。次の例:

英語の両端揃え設定コード

<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.
ログイン後にコピー

中国語を扱う場合は、次の例のように text-justify:inter-ideograph

attribute も追加する必要があります:

中国語の両端揃え設定コード

<p style="text-align:justify;text-justify:inter-ideograph;width:500px;margin:10px auto;
border:1px solid red;padding:10px;">
ログイン後にコピー
这是中文文字的效果:
测试文字内容区开始:
创想信息网—前端开发栏目,关注网站设计、前端开发。
创想信息网其他关注方向有——dedecms二次开发、标签使用及优化,计算机故障排除,学习资源分享,
开发工具推荐,视频教程汇总,精彩博文推荐,社会经验、情感经历分享、数据库使用以及几个常见的web项目运维。
ログイン後にコピー
注:

句読点はレイアウトの配置に影響します。デフォルトでは、ほとんどの主流ブラウザは句読点が行の先頭を占めることを回避します。この問題の制御はさらに複雑です。

スペースがある場合は状況が異なります。行末にスペースがある場合、行は自動的に折り返され、句読点が次の行の先頭に来ることもあります。

次のChuangxiang Information Networkは、CSSにおけるtext-justifyの知識をレビューします:

Text-justify: パラメータは次のとおりです

autoを使用すると、ブラウザのユーザーエージェントが使用される整列ルールを決定できます

追加することで単語間で使用されます単語間のスペースによりテキストが配置されます。その両端揃えの動作は、段落の最後の行には影響しません。

新聞 単語または文字間のスペースを増減してテキストを配置します。ラテン文字を両端揃えするための最も正確な形式です。

distribute は新聞によく似たスペースを処理し、東アジアの文書に適しています。特にタイ。

distribute-all-lines は、distribute と同じ方法で行を整列させますが、整列した 2 つの段落の最後の行も含めません。

inter-ideograph は、表意文字テキストの完全な位置揃えを提供します。彼は表意文字や単語間のスペースを追加または削除します。

以上がCSSのtext-justify属性の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート