在 CSS 中处理长内容和意外内容

编写 CSS 时，有时我们会忘记设计中的一些边缘情况。例如，当内容比我们预期的长，而我们没有考虑这种可能性时，我们的设计可能会被破坏。我们无法保证我们的 CSS 始终按预期工作，但至少可以通过测试不同类型的内容来减少这种情况。

当你编写 CSS 时，你是在编写抽象规则，用来处理未知内容并在未知媒介中组织它。– Keith J. Grant

在本文中，我们将浏览来自真实网站的不同 UI 问题，以便我们从一开始就能考虑到它们。准备好了吗？让我们开始吧！

带有在右侧/左侧放置的图标的按钮

这是一个手风琴的切换按钮。右侧有一个图标来强调它是可点击的。但是，当区域不够大时，文本会与图标重叠。当我们没有考虑长内容时，可能会发生这种情况。

解决方案是在右侧添加足够的填充以适应图标的大小

.button {
  padding-right: 50px;
}

请注意，增加填充如何为图标创建安全区域。现在我们可以确保如果文本变长，它不会被破坏。

查看 CodePen 上 Ahmad Shadeed (@shadeed) 编写的 带有图标的按钮。

输入占位符

为我们的表单应用 浮动标签模式 时，尤其是在右侧有按钮的情况下。我们应该彻底测试这一点，以避免标签过长时出现任何问题。

解决方案是为按钮添加position: relative。这会将其移动到标签上方。

查看 CodePen 上 Ahmad Shadeed (@shadeed) 编写的 长占位符。

长名称

在此设计中，图像浮动到左侧，我们在右侧有作者姓名。如果名称比预期长会发生什么？UI 会被破坏。

问题在于我们只将图像浮动到左侧。这可能会导致作者姓名移动到它旁边。但是，只有在名称不长的情况下，这才能正常工作。

为了使其更健壮，我们应该将作者图像float，并向作者姓名包装器添加overflow: hidden。这样，我们将获得块级格式化上下文的好处（感谢 Thierry Koblentz 在评论中指出了 这一点）。或者，另一种解决方案是使用 flexbox，因为它适合该小型组件。

查看 CodePen 上 Ahmad Shadeed (@shadeed) 编写的 长的人名。

文章正文中的长链接/单词

有时文章中会出现长链接或单词。对于非常宽的视口，这可能不会导致问题。但是对于较小的尺寸，例如手机或平板电脑，这会导致水平滚动，并且会很烦人。

对于此类问题，我们有两个解决方案

1) 使用 CSS word-break

.article-body p {
  word-break: break-all;
}

使用word-break时请务必进行良好的测试，因为它在不同浏览器之间存在一些差异。我们建议您阅读这篇关于该主题的 文章。

2) 向包装器元素添加溢出，并向链接添加文本溢出

.article-body p {
  overflow: hidden;
  text-overflow: ellipsis;
}

此解决方案对于链接更安全且更好。但对于单词，我将使用word-break。

查看 CodePen 上 Ahmad Shadeed (@shadeed) 编写的 长链接/单词。

长文章标签

当我们将文章标签放在卡片上时，我们应该只添加填充以进行间距。确定宽度和高度可能会在标签内容过长时导致 UI 被破坏。

如果你想为标签设置最小宽度，那很好。我们可以使用min-width以及标签内容周围的填充。这样，宽度将是动态的，问题将得到解决。

查看 CodePen 上 CSS-Tricks (@css-tricks) 编写的 长文章标签。

带有链接的章节标题

在此示例中，我们有一个章节标题以及右侧的“查看更多”链接。在 CSS 中有不同的方法可以编写此代码，其中一种是使用链接的绝对定位。

如果标题过长，这会导致问题。更好的解决方案可能是使用 flexbox。这样，当没有足够的空间时，它会自动将链接推到新的一行。

.header-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

上述技术称为“对齐偏移换行”。两年前，我从 这篇文章中学到了它。

查看 CodePen 上 Ahmad Shadeed (@shadeed) 编写的 带有链接的章节标题。

结论

我以艰难的方式了解到，使用虚拟内容或简单地随机添加内容是不够的。我们应该向我们的布局中添加所有类型的内容，直到某些内容被破坏。我喜欢使用 Heydon Pickering 的 forceFeed.js 来随机向特定组件添加内容。