如何使用CSS scrollmenu实现多子div横向滚动并解决文字溢出问题

问题原因 #

你的代码存在3处核心错误：

• 缺少父容器包裹：所有子div没有放在class为scrollmenu的父容器内，父容器的滚动配置完全没有生效
• 子元素属性冲突：同时设置display: inline-block和float: left，浮动属性会破坏inline-block的横向排列规则，导致父容器的white-space: nowrap失效，滚动自然不会触发
• 文本溢出未处理：父容器的white-space: nowrap会被子元素继承，导致子元素内部的文本不会自动换行，直接超出容器边界

修复后的完整代码 #

CSS代码

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  /* 可选：隐藏横向滚动条但保留滚动功能，不需要可以删掉 */
  scrollbar-width: none;
}
div.scrollmenu::-webkit-scrollbar {
  display: none;
}

div.scrollmenuchilddiv {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
  width: 200px;
  height: 200px;
  /* 覆盖父级继承的nowrap，让内部文本正常换行 */
  white-space: normal;
  /* 可选：如果想要文本溢出显示省略号，替换上面的white-space为下面的配置
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  */
}

HTML代码

<!-- 必须加父容器包裹所有子div -->
<div class="scrollmenu">
  <div class="scrollmenuchilddiv">
    Text
  </div>
  <div class="scrollmenuchilddiv">
    Text is long long long long
  </div>
  <!-- 剩余8个子div直接加在这里即可 -->
</div>

修复后子元素会横向排列，总宽度超出父容器时自动触发横向滚动，子元素内的长文本会自动换行不会溢出，如果需要省略号效果就用注释里的配置替换即可。

内容的提问来源于stack exchange，提问作者user836910