文本溢出:省略号被认为有害

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费信用额度!

Eric Eggert:

此技术有一些合法的用例。例如,您可能有一个包含标题和描述的表格。为了为标题保留更多空间,您可以在小型视口中将描述限制为一行,并在该项目的详细信息页面上重复描述。

但是,我经常看到它用于按钮甚至表单标签,以使它们看起来更美观(?)或在垂直对齐它们时。但是,一旦您更改视口或调整文本大小,文本的末尾就会消失。

我认为“……如果在某些情况下使用”应该放在那里,但它肯定使博客文章标题在没有它的时候更好。正如 Eric 所说,截断文本有一些合法的用例。也许只有几个,但仍然是合法的。

最终目标是防止“丢失”数据,这在 CSS 中肯定可能发生。意外溢出容器的文本在某种意义上丢失了,因为它根本不存在。如果该文本根本不存在,即使它是发布到网络上最好、最精心制作的号召性用语,用户也会错过它。

Eric 指出,无法使 text-overflow: ellipsis 截断的文本可见。一旦消失,它就消失了(尽管屏幕阅读器似乎会宣布它)。它实际上是丢失的数据。您可能对此感到满意。只要您知道发生了什么并且是预期的,那就没问题。

但以下是 Eric 说的话,这让我想要分享它

不要限制内容以适应您的设计,而是使您的 CSS 能够灵活地优雅地处理更长的单词。

再说一遍,您可能希望使内容符合设计。但我可能会像 Eric 一样争辩说,设计应该适应内容,而不是相反。我很难回忆起任何页面上的文本不重要或没有目的到足以让我在 CSS 属性确定的任意点将其切断的情况。也许是博客文章的存档,其中每篇文章在截断之前显示文章内容的摘录,但这并不是 text-overflow: ellipse 的用例。

CSS 拥有使灵活设计能够考虑不同文本长度的工具。因此,也许应该倾向于编写防御性 CSS……能够预测问题并知道如何优雅地处理不同内容场景的 CSS。text-overflow: ellipsis 可能是您 CSS 工具库的一部分。但它也可能是在把孩子和洗澡水一起倒掉。在给内容理发之前,值得问问失去这些数据是否值得该内容应该执行的操作的成本。

在我们讨论截断文本的同时……

直接链接 →