HTML与CSS文本溢出无法换行问题：如何实现自动换行？

问题出在你最外层容器 .first_product 的 white-space: nowrap 属性上——这个样式会强制所有子元素内的文本保持单行显示，直接覆盖了你在 .pname 里设置的 overflow-wrap 等换行属性，所以之前的尝试都没生效。

解决方案 #

给 .pdiv 或者直接给 .pname 添加 white-space: normal，覆盖父元素继承来的 nowrap 规则，这样文本就能正常自动换行了：

修改后的 CSS 示例：

.first_product {
  width: 100%;
  height: 70%;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap; /* 保留这个，保证商品列表横向排列 */
  box-shadow: 0px 1px 2px 4px black;
}

.pdiv {
  width: 23%;
  height: 90%;
  display: inline-block;
  vertical-align: middle;
  margin: 8px;
  border: 1px solid red;
  white-space: normal; /* 添加这行，重置卡片内的文本换行规则 */
}

.pimg {
  width: 100%;
  height: 80%;
  border-radius: 4px;
}

.pname {
  width: 100%;
  height: 20%;
  overflow-wrap: break-word; /* 现在这个属性能生效了 */
  background-color: green;
}

补充说明 #

• white-space: nowrap 是可继承的样式，父元素设置后所有子元素默认都会遵循，必须在需要换行的元素层级显式重置。
• 如果你的 .pname 高度固定，换行后文本可能超出容器，可以额外添加 overflow: auto（显示滚动条）或者 overflow: hidden（隐藏溢出内容）来适配。

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