css怎么让div不换行

重要提示：根据您的需求，我们可以使用 CSS 属性 white-space 来控制 div 不换行。

该属性用于控制文本在元素内的空白符号的处理方式。默认为 normal，会折合连续的空白符号，使文本在实际渲染时只显示为一个空格。

如果希望 div 内的文本保持原来的换行，可以将 white-space 属性设置为 pre 或 pre-wrap。

以下将详细介绍这两个属性。

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;。

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; 的作用，连续的空白符号 " " 会保留下来，同时文本会自动换行。

通过使用 CSS 属性 white-space，我们可以使 div 内的文本不换行。

如果希望保持原来的换行并且不折叠空白符号，可以使用 white-space: pre;。

如果希望保持原来的换行，并且自动适应容器宽度，可以使用 white-space: pre-wrap;。