[分享]css不换行左右滚动

在网页排版中，我们经常会遇到需要在一行显示过长的文本或代码的情况。如果直接将这些内容放在一个块级元素中，可能会破坏页面的布局。此时，我们可以使用 CSS 中的 whitespace 属性和 overf...

在网页排版中，我们经常会遇到需要在一行显示过长的文本或代码的情况。如果直接将这些内容放在一个块级元素中，可能会破坏页面的布局。此时，我们可以使用 CSS 中的 white-space 属性和 overflow-x 属性来实现不换行左右滚动的效果。
首先，我们需要将需要滚动的内容放在一个带有固定宽度的容器中，例如一个 div 元素。接着，在这个容器中，我们可以设置 white-space 属性为 nowrap，表示不允许文本自动换行。如果这个容器中的宽度无法完全容纳其中的内容，我们可以设置 overflow-x 属性为 auto 或 scroll，表示超出容器宽度的部分将以滚动形式展现。
下面是一个应用该原理的实例：

<div style="width: 500px; overflow-x: auto;">
  <p style="white-space: nowrap;">This is a very long text, it will not wrap and overflow the container. This is a very long text, it will not wrap and overflow the container. This is a very long text, it will not wrap and overflow the container. This is a very long text, it will not wrap and overflow the container.</p>
  <p style="white-space: nowrap;">This is a second line of very long text, it will also not wrap and overflow the container. This is a second line of very long text, it will also not wrap and overflow the container. This is a second line of very long text, it will also not wrap and overflow the container. This is a second line of very long text, it will also not wrap and overflow the container.</p>
</div> 

此时，我们会得到一个宽度为 500px 的容器，其中包含两行过长的文本。这些文本不会自动换行，若超出容器宽度，则会以滚动的形式展现，如下图所示：
通过这种方式，我们可以方便地在网页中展现大段代码或长篇文本，而不会影响页面的整体布局和美观度。