CSS 我应该避免使用“text-align: justify;”吗？

Should I avoid using "text-align: justify;"?

提问by Gabe Sumner

Is there any reason to avoid using text-align: justify;?

有什么理由避免使用text-align: justify;吗？

Does it reduce readability or cause problems?

它是否会降低可读性或导致问题？

采纳答案by hlfcoding

Firstly, this is purely a design-related problem and solution. The design of your grid specifies if justifying text is needed. I think justify align alone has no major effect on usability. Bad typography that makes text illegible is what decreases usability. That said, make sure you have solid contrasts and a good balance of spacing in your type. Font-size matters too.

首先，这纯粹是一个与设计相关的问题和解决方案。网格的设计指定是否需要对齐文本。我认为 justify align 单独对可用性没有重大影响。使文本难以辨认的糟糕排版会降低可用性。也就是说，请确保您的字体具有鲜明的对比和良好的间距平衡。字体大小也很重要。

This siteis a successful attempt at justifying text online. Since you can't control the spaces between letters and words nearly as much with CSS as you can with InDesign, it's a lot harder to justify text and not have 'rivers' of whitespace run down your rows, which happens when the spaces between words exceeds the spaces between lines. Things that make justifying text difficult: long words, row widths that don't hold enough words, and too much contrast between the text and the background colors; they make the rivers appear wider and more apparent.

该站点是在线证明文本合理性的成功尝试。由于使用 CSS 几乎无法像使用 InDesign 那样控制字母和单词之间的空格，因此要证明文本合理并且不会让空白的“河流”沿着行流过要困难得多，这发生在单词之间的空格时超过行间距。使文本对齐变得困难的事情：长单词、不能容纳足够单词的行宽以及文本和背景颜色之间的对比度太大；它们使河流显得更宽更明显。

The typographic ideal is to have an even text-block, where if you squint the text block becomes a uniform solid shade. So if you keep text at about 10px and 60% gray on white background, and have rows that fit about 20 words, justify align shouldn't look ugly. But keep in mind this does nothing to improve usability. Small, relatively light text annoys a lot of people, especially the older readers.

排版的理想是有一个均匀的文本块，如果你眯着眼睛，文本块会变成一个统一的纯色阴影。因此，如果您在白色背景上将文本保持在大约 10px 和 60% 的灰色，并且有适合大约 20 个单词的行，则 justify align 不应该看起来很丑。但请记住，这对提高可用性没有任何帮助。小而相对较轻的文本会惹恼很多人，尤其是年长的读者。

I should note that with ­(soft hyphenation) correctly separating long troublesome words like super­awesome you can mimic proper typesetting (e.g. InDesign). There's a lot of stuff out there to help you do this. I would recommend the logic for hiding, manipulating, and displaying the text to be done on the client side, perhaps with this.

我应该注意到，通过­（软连字符）正确分离像 superawesome 这样的长麻烦词，您可以模仿正确的排版（例如 InDesign）。有很多东西可以帮助你做到这一点。我会推荐隐藏、操作和显示要在客户端完成的文本的逻辑，也许使用this。

Edit: As others mention below, css hyphensare possible now, except not feasible (not in Chrome). Plus, css4 offers even more control.

编辑：正如其他人在下面提到的，css 连字符现在是可能的，除非不可行（不在 Chrome 中）。另外，css4 提供了更多的控制。

回答by dylanfm

text-align: justify shouldn't be usedin browsers at the moment. They aren't good at handling the minute details within and the output ends up containing lots of rivers and there's no support for hyphenation(other than soft hyphens).

text-align: justify 目前不应在浏览器中使用。他们不擅长处理内部的微小细节，输出最终包含大量河流，并且不支持连字符（软连字符除外）。

Noteabove was written 4.5 years ago. Things are slowly changing... http://caniuse.com/#feat=css-hyphens

上面的注释是 4.5 年前写的。事情正在慢慢改变...... http://caniuse.com/#feat=css-hyphens

Edit:Hyphenatorwas brought to my attention in this answer's comments. It looks like it makes text-align justify worth using, check out the sites that use it. You may want to use javascript to apply text-align justify before using this script so that those without javascript don't get caught out.

编辑：在这个答案的评论中，我注意到了连字符。看起来它使 text-align justify 值得使用，请查看使用它的站点。在使用此脚本之前，您可能希望使用 javascript 来应用 text-align justify，以便那些没有 javascript 的人不会被发现。

Edit 2:CSS now allows for hyphenationwith the hyphensproperty [browser support]. PPK is now saying to add it to your stylesheets, whilst Eric Meyer says just add it for mobile.

编辑 2：CSS 现在允许与属性 [浏览器支持]断字。PPK 现在说要将它添加到您的样式表中，而 Eric Meyer 说只需将它添加到移动设备中即可。hyphens

Edit 3:A good little overviewof things available to us now, with some SASS.

编辑 3：对我们现在可用的东西的一个很好的概述，有一些 SASS。

回答by allesklar

The problems brought up by others about justify alignment are more prevalent with narrow columns. If your columns are wide enough in relation to the size of your fonts and other parameters then it's ok to justify the text. Let's say you'd want a minimum of 12 to 15 words per line in average. More is better.

其他人提出的有关对齐对齐的问题在窄列中更为普遍。如果您的列相对于您的字体和其他参数的大小足够宽，那么可以对齐文本。假设您希望平均每行至少 12 到 15 个单词。更多更好。

回答by nickf

There's no technical reason not to - it's purely a design decision. Many people find that justified text is harder to read, but I guess it depends on your situation. Though it works fine for print, generally web browsers do not give enough control over the eventual output of text to guarantee that what you're serving won't look like crap on some people's screens.

没有技术上的理由不这样做——这纯粹是一个设计决定。许多人发现对齐文本更难阅读，但我想这取决于您的情况。尽管它适用于打印，但通常 Web 浏览器不会对文本的最终输出提供足够的控制，以保证您提供的内容在某些人的屏幕上不会看起来像废话。

Your best option is to avoid justification.

你最好的选择是避免辩解。

回答by infoxicated

I cant think of a compelling reason why not to justify text - at a certain point the volume and width of content almost demand that it be justified. Of course, you'll get issues with content consisting of certain word combinations, but to my mind if you're seeing rivers and unusually large spaces between words you have a different problem altogether - one of readability and clarity.

我想不出一个令人信服的理由为什么不证明文本是合理的——在某个时候，内容的数量和宽度几乎要求它被证明是合理的。当然，您会遇到由某些单词组合组成的内容的问题，但在我看来，如果您看到河流和单词之间异常大的空间，那么您就会遇到完全不同的问题 - 可读性和清晰度之一。

What I would avoid, at all costs, is centered body text. I don't think there's a greater red flag of ammateurish web design than that.

我不惜一切代价避免的是居中的正文。我认为没有比这更严重的业余网页设计危险信号了。

回答by kingjeffrey

Justification should not be used without hyphenation. Here is a PHP based hyphenation library, and a port of this library to a WordPress plugin: wp-Typography.

不使用连字符时不应使用正当理由。这是一个基于 PHP 的断字库，以及这个库到 WordPress 插件的端口： wp-Typography。

回答by strager

I prefer left justification (text-align: left) because it's generally more readable. It's also quicker to read evenly-spaced words, so I hear. Unless you have a stylistic reason for using justify, keep it left, right, or center. Especially for body text, use left. (Actually, you'd want something like "forward" for text in the other direction (e.g. Hebrew)...)

我更喜欢左对齐（text-align: left），因为它通常更具可读性。阅读均匀间隔的单词也更快，所以我听到了。除非您有使用 justify 的风格原因，否则请保持左、右或居中。特别是对于正文，请使用 left。（实际上，您希望在另一个方向（例如希伯来语）的文本中使用“转发”之类的东西......）

回答by Andy Ford

Like any web design question... it depends. As has been suggested, justified text does not usually end up looking good in narrow columns. I'd recommend against it as a general rule in sidebars as sidebars are usually narrow.

像任何网页设计问题一样......这取决于。正如所建议的那样，对齐的文本通常在窄列中看起来不太好。我建议不要将其作为侧边栏中的一般规则，因为侧边栏通常很窄。

With body copy at the often recommended 10 words per line (or with any amount above that) you will probably be able to get away with justified text and have it look reasonably good most of the time unless you're using a lot of really long words and/or strings.

使用通常建议的每行 10 个字（或超过此值的任何数量）的正文副本，您可能能够摆脱合理的文本，并且在大多数情况下看起来相当不错，除非您使用了很多非常长的单词和/或字符串。

I think I've pimped this site on StackOverflow before, but Jon Tanuses justified text in his body copy (within articles) and it looks great 99.99% of the time.

我想我以前在 StackOverflow 上对这个网站进行了拉皮条，但Jon Tan在他的正文中（在文章中）使用了合理的文本，并且在 99.99% 的时间里看起来都很棒。

回答by Thomas Hansen

Erhh... No...!

呃……不……！

[seriously] WordPress uses justify, and I think that's a pretty strong statement in regards to whether or not it decreases readability...

[严重] WordPress 使用 justify，我认为这是关于它是否会降低可读性的一个非常有力的声明......

回答by PhiLho

I think it is perfectly OK on print, but it is clunky on most Web browsers, by lack of fine control of spacing and hyphenation. Typographers can even play slightly on letter spacing or font contraction in some cases, as pages/columns (at least in magazines) can be finely tuned.

我认为它在打印时完全没问题，但由于缺乏对间距和连字符的精细控制，它在大多数 Web 浏览器上很笨拙。在某些情况下，排版员甚至可以稍微调整字母间距或字体收缩，因为可以微调页面/列（至少在杂志中）。