css不换行左右滚动条

在网页设计中，我们经常会遇到需要将某些内容水平排列，但由于内容过多或者父元素宽度限制，会出现文字换行的情况。这时，我们需要使用CSS技巧来实现不让文字换行，而是通过左右滚动条来展示全部内容。
为了实现这一效果，我们需要使用CSS的white-space属性和overflow属性。white-space属性用于控制文本如何进行空格处理，而overflow属性用于控制内容溢出时该怎么处理。
我们首先需要将需要水平排列的内容放在一个容器元素内，然后给该容器元素设置white-space属性为nowrap，这将强制文本在同一行内排列。同时，我们也需要给容器元素设置overflow-x属性为auto，这将在内容超出父元素宽度时显示左右滚动条。
下面是一个示例代码：

  <div class="container">
      <p class="text">这里是需要水平排列的文本内容，当文字过多时将会出现左右滚动条。</p>
    </div> 

  .container {
      white-space: nowrap;  /* 不换行 */
      overflow-x: auto;    /* 显示左右滚动条 */
    }
<br>
    .text {
      display: inline-block;  /* 元素以行内块级方式排列 */
    } 

通过简单的CSS设置，我们可以轻松实现不让文本换行，而是用左右滚动条展示全部内容的效果。这种技巧在网页设计中非常有用，可以用于展示长表格、代码片段等需要水平排列并且不能换行的内容。