我应该避免使用“text-align: justify;”吗？
是否有任何理由避免使用 text-align: justify;？
它会降低可读性或导致问题吗？
Is there any reason to avoid using text-align: justify;?
Does it reduce readability or cause problems?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（13）
首先，这纯粹是一个与设计相关的问题和解决方案。 网格的设计指定是否需要对齐文本。 我认为单独调整对齐对可用性没有重大影响。 糟糕的排版会导致文本难以辨认，从而降低可用性。 也就是说，请确保您的字体具有鲜明的对比和良好的间距平衡。 字体大小也很重要。
这个网站是为在线文本辩护的成功尝试。 由于使用 CSS 无法像使用 InDesign 那样控制字母和单词之间的空格，因此要对齐文本并且不让空白“河流”顺着行流下去就困难得多，当单词之间的空格时就会发生这种情况超过行与行之间的空格。 使文本对齐变得困难的因素：长单词、行宽无法容纳足够的单词以及文本和背景颜色之间的对比度太大； 它们使河流显得更宽、更明显。
排版的理想是有一个均匀的文本块，如果你眯着眼睛，文本块就会变成均匀的纯色。 因此，如果您将文本保持在白色背景上大约 10 像素和 60% 灰色，并且行可以容纳大约 20 个单词，那么对齐对齐应该不会看起来很难看。 但请记住，这对提高可用性没有任何帮助。 小而相对较轻的文字会让很多人感到厌烦，尤其是年长的读者。
我应该注意到，使用
（软连字符）正确分隔长而麻烦的单词（例如 superawesome），您可以模仿正确的排版（例如 InDesign）。 有很多东西可以帮助您做到这一点。 我建议在客户端隐藏、操作和显示文本的逻辑，也许使用 这个。编辑：正如下面其他人提到的，css连字符现在是可能的，除非不可行（不适用于 Chrome）。 另外，css4 提供了更多控制。
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.
This site is 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.
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.
I should note that with
(soft hyphenation) correctly separating long troublesome words like superawesome 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.Edit: As others mention below, css hyphens are possible now, except not feasible (not in Chrome). Plus, css4 offers even more control.
text-align: justify 目前不应在浏览器中使用。 他们不擅长处理内部的微小细节，输出最终包含大量河流，并且不支持 连字符（软连字符除外）。
上面的注释是 4.5 年前写的。 事情正在慢慢改变...... http://caniuse.com/#feat=css-hyphens
编辑：
Hyphenator 是在这个答案的评论中引起我注意的。 看起来它使文本对齐值得使用，请查看使用它的网站。 在使用此脚本之前，您可能需要使用 javascript 来应用文本对齐对齐，这样那些没有 javascript 的人就不会被抓到。
编辑2：
CSS 现在允许使用
hyphens属性进行连字符 [浏览器支持]。 PPK 现在要求将其添加到您的样式表，而 Eric Meyer 说只需为移动设备添加它。编辑3：
对我们现在可用的内容进行了很好的概述，其中包含一些 SASS。
text-align: justify shouldn't be used in 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).
Note above was written 4.5 years ago. Things are slowly changing... http://caniuse.com/#feat=css-hyphens
Edit:
Hyphenator was 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.
Edit 2:
CSS now allows for hyphenation with the
hyphensproperty [browser support]. PPK is now saying to add it to your stylesheets, whilst Eric Meyer says just add it for mobile.Edit 3:
A good little overview of things available to us now, with some SASS.
其他人提出的关于对齐合理性的问题在窄列中更为普遍。 如果您的列相对于字体大小和其他参数足够宽，那么就可以调整文本。 假设您平均每行至少需要 12 到 15 个单词。 越多越好。
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.
没有任何技术原因不这样做——这纯粹是一个设计决定。 许多人发现合理的文本更难阅读，但我想这取决于您的情况。 尽管它适合打印，但通常网络浏览器无法对文本的最终输出提供足够的控制，以保证您所提供的内容在某些人的屏幕上不会看起来像垃圾。
你最好的选择是避免辩解。
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.
Your best option is to avoid justification.
我想不出一个令人信服的理由来解释为什么不证明文本的合理性——在某种程度上，内容的数量和宽度几乎要求它是合理的。 当然，您会遇到由某些单词组合组成的内容的问题，但在我看来，如果您看到河流和单词之间异常大的空间，那么您就会遇到完全不同的问题 - 可读性和清晰度之一。
我不惜一切代价避免的是居中的正文。 我认为对于业余网页设计来说，没有比这更大的危险信号了。
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.
我更喜欢左对齐（text-align: left），因为它通常更具可读性。 我听说，阅读均匀间隔的单词也更快。 除非您有使用对齐的风格原因，否则请将其保留在左侧、右侧或居中。 特别是对于正文，请使用左侧。 （实际上，您需要类似“前进”的内容来表示另一个方向的文本（例如希伯来语）......）
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)...)
如果没有连字符，则不应使用理由。 这是一个基于 PHP 的连字符库，以及该库到 WordPress 插件的端口： wp-Typography。
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.
就像任何网页设计问题一样……这取决于情况。 正如所建议的，对齐的文本通常在狭窄的列中看起来不太好。 我建议不要将其作为侧边栏的一般规则，因为侧边栏通常很窄。
如果正文采用通常建议的每行 10 个字（或任何高于该字数的字数），您可能能够获得合理的文本，并且在大多数情况下看起来相当不错，除非您使用大量非常长的文本。单词和/或字符串。
我想我以前曾在 StackOverflow 上拉过这个网站，但是 Jon Tan 在他的正文副本中使用了合理的文本（在文章中） ）并且 99.99% 的时间看起来都很棒。
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.
I think I've pimped this site on StackOverflow before, but Jon Tan uses justified text in his body copy (within articles) and it looks great 99.99% of the time.
呃……不……！
[说真的]WordPress 使用 justify，我认为这是一个关于它是否会降低可读性的非常有力的声明......
Erhh... No...!
[seriously] WordPress uses justify, and I think that's a pretty strong statement in regards to whether or not it decreases readability...
您还可以使用 text-justify:newspaper。 text-justify css 标签可帮助您控制对齐时文本的换行方式
You can also use text-justify:newspaper. The text-justify css tag helps you control how you wrap the text when you justify
文本对齐可以通过多种方式完成。
几个定义： 调整单词之间的间距是“跟踪” 调整字符之间的间距是“字距调整” 好的布局程序会自动进行一些字距调整，并且它会因字母对而异。 变量的 va 可以精确地比 xa 更接近。 好的字体内置了字距调整提示表来帮助完成此过程。
在等宽字体的早期，它是通过在单词之间插入额外的空格来完成的。 这使得输出看起来非常笨重。 如果行尾有 4 个空格，行中有 6 个空格，则其中 4 个将变成双空格。
等宽字体不应该是合理的。
对于可变宽度字体，我们有 em 空格、en 空格等，因此空间可以更好地分布。
我认为这就是现在大多数浏览器的情况。 大多数时候它工作得相当好。 为了使其正常工作，需要满足以下条件：
英语的平均单词是 5 个字符。 因此，平均而言，您将有 5 个字符（5 个字符的单词加上空格不适合，因此会被移至下一行）
如果该行有 10 个单词，则需要为每个单词间添加大约一半的标准空格差距。
如果最后一个词很长，例如“头痛”并且没有空间，那么现在您有 10 个空间可以分配。 这开始看起来很糟糕。
这就是连字符字典发挥作用的地方。 连字可以通过算法来完成，但是有足够多的例外情况，拥有字典会有很大帮助。 （对于字典中没有的单词，有一个特殊的软连字符字符。）
连字符可以分割单词，使行填充得更均匀。
根据经验，我认为 65 em 的线长是一个很好的折衷方案。 很多时候每行有 11-13 个单词。
另一种调整的方法是分割字符之间的空间。 这避免了上面的一些问题，但如果您在不够的行中分配大量空间，看起来仍然很奇怪。 您有时会在报纸上看到这种情况，其中一个单词的每个字符之间似乎有一个完整的空格。 这是延长线路的一个很好的论据。
好的排版程序（InDesign、*TeX、Framemaker）会在字间间隙中结合额外的空间，以及字符之间微小的额外空间。
有一个新的东西，text-justify，可以在 CSS 中使用来修改 text-align: justify 的使用。 名义上它接受选项
CanIuse https ://caniuse.com/#search=text-justify
CSS 工作组 https://drafts.csswg.org/css- text-3/#text-justify-property
CanIuse 目前仅报告 Firefox 的合规性，Chrome 支持它，但要求您启用实验性功能。 CanIuse 声称支持存在问题。 访问 Chromium bug 跟踪网站，声称它已修复。 去搞清楚。 没有测试过。
其他实用要点：
我对网站的样式表进行了四项更改：
结果是每次会话的网站时间和页面数量增加了一倍。
轶事，但可能值得您自己测试。
Text justification can be done in several ways.
Couple of definitions: Adjusting the spacing between words is "tracking" Adjusting the spacing between characters is "kerning" Good layout programs do some kerning automatically, and it varies by letter pair. The va of variable can be kerned closer than the xa in exact. Good fonts have built in tables of kerning hints to aid in this process.
In early days of monospace fonts it was done by inserting extra spaces between words. This made for very clunky looking output. If you had 4 spaces at the end of the line, and 6 spaces in the line, 4 of them would become double spaces.
Monospace fonts shouldn't be justified.
With variable width fonts, we have em spaces, en spaces, etc, and so the space could be better distributed.
I think this is where most browsers are now. It works reasonably well most of the time. For it to work well the following conditions need to hold:
The average word in English is 5 characters. So on the average you will have 5 characters (the 5 character word plus space wouldn't fit so gets bumped to the next line)
If you have 10 words on the line, then you need to add about half a standard space to each interword gap.
If the last word is a long one, like "headaches" and there isn't room for it, now you have 10 spaces to distribute. This starts to look bad.
This is where a hyphenation dictionary comes into play. Hyphenation can be done by algorithm, but there are enough exceptions that having a dictionary helps a lot. (There is a special character for soft hyphens for words not in your dictionary.)
Hyphenation can split a word so that the the line fills more evenly.
Empirically I decided that a 65 em line length made a good compromise. This gives 11-13 words per line a lot of the time.
Another approach to justification is to split the space up between characters. This avoids some of the problems above, but still looks odd if you are distributing a lot of space in not enough line. You see this in newspapers now and then where a word seems to have a full space between each character. This is a good argument for a longer line.
Good typesetting programs (InDesign, *TeX, Framemaker) do a combination of extra space in interword gaps, and tiny extra spaces between characters.
There is a new kid on the block, text-justify that can be used in CSS to modify the use of text-align: justify. Nominally it accepts the options
CanIuse https://caniuse.com/#search=text-justify
CSS working group https://drafts.csswg.org/css-text-3/#text-justify-property
CanIuse reports compliance only for Firefox right now, Chrome supports it but requires that you enable experimental features. CanIuse claims that support is buggy. Going to the Chromium bug tracking site, claims that it's fixed. Go figure. Haven't tested.
Other pragmatic points:
I made four changes to my site's style sheet:
The result was that time on site and pages per session doubled.
Anecdotal, but may be worth your own test.
我认为它在打印上完全没问题，但在大多数网络浏览器上却很笨重，因为缺乏对间距和连字符的精细控制。 在某些情况下，印刷师甚至可以稍微调整字母间距或字体收缩，因为页面/列（至少在杂志中）可以进行微调。
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.
应该提到的是，Internet Explorer（至少）版本 8 之前无法正确呈现
text-align: justify。 相反，它被解释为text-align: center。以下是更多信息： text-align: justify
让我有些头疼，找出为什么 IE保持中心的东西。 也许它可以节省其他人一些时间。
It should be mentioned that Internet Explorer (at least) up to version 8 does not render
text-align: justifycorrectly. Instead it is interpreted astext-align: center.Here is more info: text-align: justify
Caused me some headaches to find out why IE kept centering stuff. Maybe it saves somebody else some time.