CSSで正当化されたテキストの単語間隔を制御するにはどうすればよいですか?


9

私はかなり小さい(各段落のすぐ下にある)テキストの2つのブロックを持ち、それらは本当に適切に見えるように見えますが、問題はtext-align: justify;時々本当に大きなスペースを追加し、テキストをやや醜くすることです(反対の効果、明らかに)。

これが起こらないように、CSSで単語間隔をより細かく調整することは可能ですか?

回答:


9

CSS TEXT-JUSTIFY

このIEのみのプロパティは、text-alignプロパティで使用される「正当化」値の改善を提供します。実際、そのプロパティにtext-justify何らかの効果を与えるには、「正当化」値を設定する必要があります。

text-justify は、囲まれたコンテンツに対する細かいレベルの正当化制御を提供し、さまざまな言語記述システムで使用されるさまざまな洗練された正当化モデルを可能にします。

<p style="text-align: justify; text-justify: newspaper;">
    This is Newspaper justified content
</p>

可能な値

VALUE                   DESCRIPTION
----------------------  ---------------------------------------------------------------------
auto                    The browser will determine the appropriate justification algorithm
                        to use

distribute              Justification is handled similarly to the newspaper value,
                        but this version is optimized for East Asian content
                        (especially the Thai language.)
                        In this justification method, the last line is not justified.

distribute-all-lines    Behavior and intent for this value is the same as with the
                        distribute value, but the last line is also justified.

inter-cluster           Justifies content that does not have any inter-word spacing
                        (such as with many East Asian languages.)

inter-ideograph         Used for justifying blocks of ideographic content.
                        Justification is achieved by increasing or decreasing spacing
                        between ideographic characters and words as well.

inter-word              Justification is achieved by increasing the spacing between words.
                        It is the quickest method of justification and does not justify
                        the last line of a content block.

newspaper               Spacing between letters and words are increased or decreased
                        as necessary.

IEのリファレンスは、「これはラテンアルファベットの正当化の最も洗練された形式です」と述べています。

出典:http : //www.css3.com/css-text-justify/

お役に立てれば!


これは現在、他のブラウザサポートされているようです。
mndrix

3

text-justify現在IEでのみサポートされているように見えるの使用に加えて、明示的なハイフネーションヒント&shy;やブラウザーベースの自動ハイフネーションを使用hyphens: autoしたハイフネーションの追加、適切なブラウザープレフィックスの使用、またはHyphenator.jsのようなJavaScriptベースのハイフネーターの使用を検討してください。多くの場合、ハイフネーションを使用すると、正当化でスペースを追加する必要が大幅に減少します。


The text-justify property is supported in all of the major browsers.、ソース:w3schools.com/cssref/css3_pr_text-justify.aspおよびText-Align、w3schools.com

3
@AbdiasSoftwareは、ページが偽である-まだがらくたであるW3Schoolsの別の証拠を参照してくださいw3fools.comは(W3Schoolsのページでは、かなり迅速に情報が間違っていることを確認するために使用することができ、「PlayIt」ボタンが、含まれています。)
ユッカK. Korpela

それらは時々少し古くなっていますが、私はそれらを偽物とは呼びません:-)とにかく別のソースです:reference.sitepoint.com/css/text-align

@AbdiasSoftware、他のソースは別のプロパティに関するものです。reference.sitepoint.comサイトはまったく言及text-justifyしていません。しかし、私は最初text-align-justifytext-justify(今修正された)の代わりに書いたことを残念に思います。text-align: justifyもちろん、ここでの設定は暗示されています。問題は、正当化のタイプを制御できるかどうかです。
Jukka K. Korpela

うーん、面白いですね。もう少し調べてみます。ありがとう。ここは午前4時です。私の判断はずれです:-)
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.