Materialize下拉菜单文本过长显示横向滚动条而非超出父容器的问题

嘿，我来帮你搞定这个Materialize下拉菜单的问题！

问题原因 #

Materialize框架的下拉菜单容器（.dropdown-content）默认设置了white-space: nowrap，强制菜单项文本不换行，同时容器有固定宽度限制，所以当文本过长时，就会触发横向滚动条，而不是让容器自适应内容宽度或者文本换行。你之前尝试的Bootstrap方法没用，是因为两个框架的默认样式逻辑完全不同~

具体解决方法 #

你可以通过自定义CSS覆盖Materialize的默认样式，这里提供两种常用方案：

方案一：让长文本自动换行，容器自适应高度

这种方案适合希望文本换行、下拉菜单保持紧凑宽度的场景：

/* 允许菜单项文本换行 */
.dropdown-content li {
  white-space: normal;
}
/* 移除下拉容器的固定宽度和最大宽度限制，让容器随内容调整 */
.dropdown-content {
  width: auto !important;
  max-width: none;
}

方案二：保持文本不换行，让下拉容器横向撑开

如果希望文本保持一行显示，下拉菜单自动拓宽容纳内容，可以用这个：

/* 去掉横向滚动条 */
.dropdown-content {
  overflow-x: visible;
  /* 覆盖默认固定宽度，让容器随内容撑开 */
  width: auto !important;
  /* 可选：如果需要保持文本不换行，保留这个属性（Materialize默认已设置） */
  white-space: nowrap;
}

注意事项 #

• 把这段CSS代码放在Materialize官方CSS文件之后加载，确保样式优先级足够覆盖默认设置。
• 如果!important不生效，可以尝试用更具体的选择器，比如.nav-wrapper .dropdown-content来提高样式权重，避免和其他自定义样式冲突。
• 修改后刷新页面，测试你的“about”和“profile”下拉菜单，就能看到效果啦！

内容的提问来源于stack exchange，提问作者Andy at Focallocal