使用 CSS 空格修复文本重叠问题
有时，nowrap当您不希望文本在尴尬的位置断开时，这样做会很有帮助🔗
但是，nowrap有时可能会导致文本重叠。您可以通过将 设置white-space为normal👍来轻松解决此问题。
div {
white-space: nowrap;
}
div {
white-space: normal;
}
为什么会出现文本重叠？
让我们深入探讨一下文本重叠发生的原因。
<div class="container">
<div class="boxes">Some extra long text</div>
<div class="boxes">Short text</div>
</div>
.container {
display: flex;
}
.boxes {
white-space: nowrap;
}
即使我们已经nowrap设置好了，也没有重叠。太好了！但是让我们看看如果我们把width框设为固定值会发生什么。
.boxes {
width: 100px;
}
哦不😱重叠问题出现了！这是因为默认设置是无限扩展width: auto。这意味着框会根据内容自动扩展。但是，当我们设置固定宽度时，就限制了它的增长。由于没有扩展空间，文本就会溢出到它的同级框中🤭
解决文本重叠问题
我们可以通过更改我们的white-space来轻松解决这个问题normal。
.container {
display: flex;
}
.boxes {
width: 100px;
white-space: normal; // 👈
}
当然，width: auto如果你不介意盒子扩展，也可以通过移除固定宽度（例如）来解决这个问题。哪种方法更好呢？这完全取决于你想设计的用户界面🙂
使用案例nowrap
在你得出“这样做不好，因为它会导致重叠”的结论之前，nowrap我想说，有些情况下我希望保留文本的原始形式。因为文本拆分会产生意想不到的效果，造成笨拙的用户界面，从而损害用户体验。
nowrap代码显示的优势
例如，在代码块中，我不希望文本换行。文本换行会使我的代码示例难以理解。相反，我希望文本保持在一行内，并在溢出时触发滚动条。
nowrap链接的优势
有时，在创建“了解更多”或“阅读更多”时，您可能会添加插入符号“»”或“›”。您需要将这些文本保持在一起，因为将它们分开可能会导致显示效果不佳。
CSS空白
您还可以设置更多值white-space：
white-space: normal; /* default */
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;
我计划在以后的代码小贴士中详细介绍这些内容。同时，如果您想提前了解一下，可以查看MDN 文档：空格👍
在处理现有代码库时，应假定开发者的意图是积极的。
所以我注意到这white-space: normal是默认设置。这意味着如果我们没有实现这个功能，就不会出现这种重叠white-space: nowrap。也就是说，居然有人真的把这种风格写进了我们的代码库😳 别急着😡……
在处理现有代码库时，我们经常会遇到一些让人摸不着头脑的代码。不过，别急着喷git blame😅，我们先假设对方的本意是好的。作为开发者，我们总是会尽量考虑到各种极端情况。但很多时候，只有把代码发布上线，让用户开始使用之后，我们才能真正了解问题所在。要百分百理解我们实现的全部细节是非常困难的。我们尽力而为，但难免会有疏漏。坦白说，这正是开发者存在的意义所在。大多数时候，我们都在忙着修复bug🐞
我们不应该害怕改变。事实上，改变正是我们进步和变得更好的途径。在努力改进的过程中，我们难免会犯错。当错误发生时，不要浪费时间互相指责，也不要急于妄下负面评价。我们需要体谅他人，因为每个人都是出于好意。重要的是，我们要从错误中吸取教训，迅速改正，然后继续前进💪
社区意见
@KyleDaltonSmith： text-overflow: ellipsis 在适当的情况下也可以有所帮助。
@longlho： white-space 属性在某些不使用空格的脚本中存在一些怪癖，因此它并非 100% 国际化安全。
-
是的，这是不同标准互操作（CSS - W3C、JS - ECMA262、Unicode - Unicode）中非常常见的问题。如果您使用老挝语中的任何句子，例如 ມື້ນີ້ເປັນມື້ທີ່ດີ FF 和 Chrome 的中断方式不同。对于其他文本操作 CSS 来说也是如此，例如大写/自动换行/文本溢出...
-
有趣的是，如果你对比一下我上面这条推文中 Firefox 和 Chrome 浏览器的对比，你会发现 Firefox 在处理老挝语时换行方式有所不同。像 zalgo 这样的多字节字符的显示效果更差。
-
@donut87：我总是假设对方是出于好意。不过，如果我不理解某些东西，
git blame它确实是最方便的工具之一。它能告诉我该问谁。但是，这个命名很糟糕。它与追究某人的错误无关，而是“告诉我谁该负责”。我知道有些人曾经/现在为 blame 命令设置了一个 Git 别名，并将其命名为praise……
资源
感谢阅读❤
想了解更多代码技巧，请访问samanthaming.com
| 🌟推特 | 👩🏻💻 SamanthaMing.com |