我永远不会忘记 Karen McGrane 给世界带来的一个重要教训：截断不是内容策略。 这个想法是，仅仅通过编程方式剪掉文本就像一把大锤，避免了那种真正思考和计划才能带来良好体验的思考方式。
当然，您可以使用 CSS 截断文本。 一些 overflow: hidden; 将剪切任何内容，您可以使用 text-overflow: ellipsis; 来美化它。 即使是多行 裁剪 现在也变得非常容易。 网络是一个很大的地方。我很高兴我们拥有这些工具。
但是更好的方法是结合实际的内容策略（即计划文本具有一定的长度并使用人性化的触感使其正确）和拥抱非对称设计。 在后者方面，Ben Nadel 最近 很好地阐述 了这个想法
不幸的是，数据不是对称的。 这就是为什么每个 Apple 产品演示都会被嘲笑，因为它展示的用户都只有四个字母的名字：Dave、John、Anna、Sara、Bill、Jill 等。 Apple 使用这种对称数据，因为它可以整齐地融入其对称的用户界面 (UI) 设计中。
但是，一旦您将产品发布到“现实世界”，用户开始将“现实世界数据”输入其中，您就会立即发现，塞入对称设计中的非对称数据看起来可能很糟糕。 实际上，它可能仍然看起来不错；但是，它提供了糟糕的用户体验。
为了解决这个问题，我们需要转向非对称现实。 我们需要接受数据是非对称的事实，并且我们需要设计可以扩展和收缩以与非对称性一起工作，而不是违背它工作的用户界面。
Ben Nadel，“拥抱非对称设计并克服 CSS 中“text-overflow: ellipsis”的有害影响”
幸运的是，如今 CSS 拥有许多工具来帮助实现对非对称性的拥抱。 我们有 CSS 网格，它可以轻松地重叠区域、定位图像和文本以便文本可以向上增长，以及将它们与兄弟元素对齐，即使它们大小不同。
将其与 aspect-ratio 和 object-fit 等内容结合起来，我们就拥有了拥抱非对称性所需的所有工具，但不会遇到尴尬的空白空间和错位等问题。
该死。让我在我的其他安静的办公桌堆里尴尬地笑起来。