css不换行左右滚动

<div class="scroll-container">
  <div class="scroll-content">
    这是一段很长的文本内容，需要通过左右滚动来查看完整内容。
  </div>
</div>

.scroll-container {
  width: 300px; /* 设置容器宽度 */
  overflow-x: auto; /* 实现水平滚动条 */
  white-space: nowrap; /* 防止内容换行 */
}

.scroll-content {
  display: inline-block; /* 使内容在一行内显示 */
}

.scroll-container {
  width: 300px; /* 设置容器宽度 */
  overflow-x: auto; /* 实现水平滚动条 */
  white-space: nowrap; /* 防止内容换行 */
}

.scroll-container {
  width: 300px; /* 设置容器宽度 */
  overflow-x: auto; /* 实现水平滚动条 */
  white-space: nowrap; /* 防止内容换行 */
}

.scroll-content {
  display: inline-block; /* 使内容在一行内显示 */
}

/* 自定义滚动条样式 */
.scroll-container::-webkit-scrollbar {
  width: 10px;
}

.scroll-container::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 5px;
}

.scroll-container::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}