此技术有一些合法的用例。例如,您可能有一个包含标题和描述的表格。为了为标题保留更多空间,您可以在小型视口中将描述限制为一行,并在该项目的详细信息页面上重复描述。
但是,我经常看到它用于按钮甚至表单标签,以使它们看起来更美观(?)或在垂直对齐它们时。但是,一旦您更改视口或调整文本大小,文本的末尾就会消失。
我认为“……如果在某些情况下使用”应该放在那里,但它肯定使博客文章标题在没有它的时候更好。正如 Eric 所说,截断文本有一些合法的用例。也许只有几个,但仍然是合法的。
最终目标是防止“丢失”数据,这在 CSS 中肯定可能发生。意外溢出容器的文本在某种意义上丢失了,因为它根本不存在。如果该文本根本不存在,即使它是发布到网络上最好、最精心制作的号召性用语,用户也会错过它。
Eric 指出,无法使 text-overflow: ellipsis
截断的文本可见。一旦消失,它就消失了(尽管屏幕阅读器似乎会宣布它)。它实际上是丢失的数据。您可能对此感到满意。只要您知道发生了什么并且是预期的,那就没问题。
但以下是 Eric 说的话,这让我想要分享它
不要限制内容以适应您的设计,而是使您的 CSS 能够灵活地优雅地处理更长的单词。
再说一遍,您可能希望使内容符合设计。但我可能会像 Eric 一样争辩说,设计应该适应内容,而不是相反。我很难回忆起任何页面上的文本不重要或没有目的到足以让我在 CSS 属性确定的任意点将其切断的情况。也许是博客文章的存档,其中每篇文章在截断之前显示文章内容的摘录,但这并不是 text-overflow: ellipse
的用例。
CSS 拥有使灵活设计能够考虑不同文本长度的工具。因此,也许应该倾向于编写防御性 CSS……能够预测问题并知道如何优雅地处理不同内容场景的 CSS。text-overflow: ellipsis
可能是您 CSS 工具库的一部分。但它也可能是在把孩子和洗澡水一起倒掉。在给内容理发之前,值得问问失去这些数据是否值得该内容应该执行的操作的成本。
在我们讨论截断文本的同时……
我发现它对于 URL 之类的东西很有用,您无法轻松地将其分成几部分。
绝对正确。
最好将每个字母换行而不是隐藏文本。大多数用户可以在短时间内得到单词。对我来说,更好的用户体验。