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


9

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

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

Answers:


9

CSS TEXT-JUSTIFY

仅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/

希望这可以帮助!


现在其他浏览器似乎支持此功能。
mndrix

3

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


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”按钮,您可以使用它们快速查看其信息有误。)
Jukka K. Korpela

它们有时有些过时,但我不会称它们为伪造的:-)无论如何,这是另一个来源:reference.sitepoint.com/css/text-align

@AbdiasSoftware,另一个来源是关于另一个属性。reference.sitepoint.com网站完全没有提及text-justify。但是很抱歉我最初写的text-align-justify不是text-justify(现在已修复)。text-align: justify这里当然暗含该设置。问题是理由类型是否可以控制。
Jukka K. Korpela

嗯,很好玩。我将做更多的研究。谢谢。现在是凌晨4点,我的判断
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.