如何使用 CSS 控制对齐文本中的字间距?

平面设计 网站设计 排版 css
2022-01-21 21:15:29

我有 2 个非常小的文本块(每个都在一个段落下),它们看起来确实更合理,但问题是text-align: justify;有时会添加非常大的空格并使文本有些难看(显然是相反的效果)。

是否可以使用 CSS 更精细地调整单词间距,以免发生这种情况?

2个回答

CSS 文本对齐

这个仅限 IE 的属性提供了对text-align属性中使用的“证明”值的改进。实际上,必须为该属性设置“justify”值才能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/

希望这可以帮助!

除了使用text-justify目前似乎仅受 IE 支持的 . 之外,还可以考虑添加连字符、显式连字符提示&shy;和/或基于浏览器的自动连字符、使用hyphens: auto适当的浏览器前缀或使用基于 JavaScript 的连字符(如 Hyphenator.js)。连字通常大大减少了在对齐中增加间距的需要。