我们在写CSS的时候，有时会忘记设计中的危急情况。例如，当内容的长度超过我们的预期时，我们无法解释这种可能性，页面的设计很可能因此而崩溃。我们不能保证css总是按我们预期的那样工作，但至少我们可以用不同类型的内容进行测试，以减少这种情况发生的机会。在本文中，我们通过检查真实网站上的各种UI问题来解释为什么这些网站可能会崩溃。你准备好了吗？来吧！右侧/左侧带有小图标的按钮这是手风琴切换按钮。按钮右侧有一个小图标，以强调它是可点击的。但是，当按钮的区域不够长时，按钮上的文字会盖住图标。当我们不考虑更长的内容时，就会发生这种情况。一种解决方案是在右侧添加足够的填充以适应icon.button的大小{padding-right:50px;}请注意我们如何增加填充以创建图标的安全显示区域，现在我们可以确定Button布局不再被破坏。输入占位符在我们的论坛中使用浮动标注模式时，尤其是右侧的按钮，我们需要充分测试，避免长占位符带来的问题。一种解决方法是添加位置：相对于按钮，这将覆盖占位符顶部的按钮。长名字在此设计中，图像浮动到左侧，右侧显示作者姓名的相关信息。当右边的消息太长时会发生什么？毫无疑问，布局会崩溃。这里的问题是我们只是将图像向左浮动，以便作者的名字从它身边移动，但这只有在作者的名字很短的情况下才有效。为了使页面布局更具适应性，我们需要为这两个元素添加宽度。比较推荐的方式是使用flexbox，比较适合这种小组件。文章中有很长的链接/词有时文章中包含一些很长的超链接或词，当窗口很宽时可能不会出现问题。但对于一些较小的设备，例如手机或平板电脑，这可能会产生恼人的水平滚动条。针对这个问题我们有两种解决方案：1）使用CSSword-break.article-bodyp{word-break:break-all;}word-break属性在不同的浏览器中表现不同，所以在使用时需要充分测试。2)添加overflow和text-overflow.article-bodyp{overflow:hidden;text-overflow:ellipsis;}到外部元素。这种方案对长链接比较友好。对于长单词，我建议使用分词。文章标签太长当我们将文章标签放在卡片上时，我们最好只通过设置其填充来确定其大小。当标签的内容过长时，硬编码高度和宽度可能会导致布局折叠。您还可以设置标签的最小宽度。给padding包裹的label的content元素使用min-width属性时，宽度会动态变化，问题就解决了。这个带有永久链接的节标题示例在节标题的右侧有一个“查看更多”链接。有几种不同的方式来编写CSS，其中之一是对链接使用绝对定位。当标题太长时可能会导致一些问题。更好的解决方案是使用flexbox布局，它会在空间不足时自动将链接挤到下一行。.header-2{显示：flex;弹性包装：包装；证明内容：空格之间；align-items:center;}上面的技巧叫做'justifymobilewrap'。
