CSS 如何使 div 不换行
1. CSS 属性 white-space
重要提示：根据您的需求，我们可以使用 CSS 属性 white-space 来控制 div 不换行。
该属性用于控制文本在元素内的空白符号的处理方式。默认为 normal，会折合连续的空白符号，使文本在实际渲染时只显示为一个空格。
如果希望 div 内的文本保持原来的换行，可以将 white-space 属性设置为 pre 或 pre-wrap。
以下将详细介绍这两个属性。
2. white-space: pre
white-space: pre; 会保留文本中的空白符号和换行符号，并且不会将连续的空白符号折叠为一个。
下面是一个例子：
.container {
white-space: pre;
}
在这个例子中，如果 div 内的文本内容是：
This is a long
piece of text.
那么渲染出来的结果将是：
This is a long
piece of text.
注意，由于 white-space: pre; 的作用，连续的空白符号 " " 也会保留下来。
如果希望连续的空白符号也仅显示为一个空格，请使用 white-space: pre-line;。
3. white-space: pre-wrap
white-space: pre-wrap; 与 white-space: pre; 类似，会保留文本中的空白符号和换行符号，并且不会将连续的空白符号折叠为一个。
与 white-space: pre; 不同之处在于，white-space: pre-wrap; 还会自动换行，使文本在容器内适应宽度。
下面是一个例子：
.container {
white-space: pre-wrap;
}
在这个例子中，如果 div 内的文本内容是：
This is a long
piece of text.
那么渲染出来的结果将是：
This is a long
piece of text.
注意，由于 white-space: pre-wrap; 的作用，连续的空白符号 " " 会保留下来，同时文本会自动换行。
4. 小结
通过使用 CSS 属性 white-space，我们可以使 div 内的文本不换行。
如果希望保持原来的换行并且不折叠空白符号，可以使用 white-space: pre;。
如果希望保持原来的换行，并且自动适应容器宽度，可以使用 white-space: pre-wrap;。