在前端开发中，我们经常会使用一些 CSS Reset 文件来覆盖默认的浏览器样式，使我们能够更好地控制网页的样式。但是，这种做法容易带来一些问题，其中之一就是经常出现的文字折叠问题。本文将介绍这个问题的原因，以及如何解决它。
问题的原因
所谓文字折叠问题，是指当一行文字超出容器的宽度时，本应该自动换行的文字却被截断了，导致后面的文本无法显示出来。这个问题的根本原因在于，CSS Reset 文件中经常会将文本的换行方式改为了 nowrap，而没有注意到这种修改可能对后续的文本展示产生影响。
具体来说，CSS Reset 中经常会加入一条类似如下的 CSS 代码：
* {
box-sizing: border-box;
white-space: nowrap;
}这段代码的作用是将所有元素的盒模型设置为 border-box，并将所有元素的文本换行方式设置为 nowrap。这样做的目的是防止在不同浏览器中出现不同的盒模型计算方式，以及保证在不同设备上显示相同的文本行为。然而，问题就在这里：将文本换行方式设置为 nowrap，会导致所有文本都在同一行上，超出容器宽度的文本自动被截断，导致后续的文本无法展示。
解决方案
为了解决文字折叠问题，我们需要重新设置文本的换行方式。常见的解决方案有三种：将文本换行方式改为 break-word、使用 overflow 属性进行控制、以及嵌套一层容器进行布局。
将文本换行方式改为 break-word
将文本换行方式改为 break-word，可以让超出容器宽度的文本自动换行，而不是被截断。这个方案的优点是简单，但也有一定的局限性。具体代码如下：
.container {
word-wrap: break-word;
}使用 overflow 属性进行控制
将容器的 overflow 属性设置为 hidden 或 auto，可以让超出容器宽度的文本进行滚动或隐藏。这个方案的优点是可以将文本全部保留，但也有可能影响用户体验，需要根据具体情况进行选择。具体代码如下：
.container {
overflow: hidden; /* 或者 overflow: auto; */
}嵌套一层容器进行布局
在容器中再嵌套一层容器，让文本在内层容器中展示，可以避免文字折叠问题的出现。这个方案的优点是可以灵活掌控布局，但也增加了 HTML 结构的复杂度。具体代码如下：
-- -------------------- ---- -------
---- ------------------------
---- ------------------------
------- -- ---- ---- ---- ---- ---- ------ ---- ------ --- --------------
------
------
-------
---------------- -
------ ------
------- ------
----------------- -----
--------- -----
-
---------------- -
------ -----
------- -----
--------- -------
-
--------总结
文字折叠问题是前端开发中常见的一个问题，容易出现在使用 CSS Reset 文件时。解决这个问题的方法有很多种，我们可以根据具体情况进行选择。但总的来说，我们应该在使用 CSS Reset 文件时，注意其对文字换行方式的影响，以避免出现不必要的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64750110968c7c53b0231f60