设置max-width后卡片内文本不换行的技术问题求助

你的猜测完全正确，问题根源就是容器的white-space: nowrap——这个属性会强制所有子元素的文本不换行，哪怕你给卡片设置了max-width也无法生效。要修复这个问题，只需要在卡片和列表项层级重置white-space属性，同时调整一些布局细节：

修改后的CSS代码 #

.c-card {
  display: flex;
  flex-direction: column;
  gap: 1em;
  white-space: normal; /* 允许卡片内部文本换行 */
}
@media screen and (min-width: 32em) {
  .c-card {
    max-width: 45em;
    flex-direction: row;
  }
}
.container {
  overflow-x: auto; /* 仅在内容超出时显示滚动条，体验更友好 */
  padding-left: 0;
  white-space: nowrap; /* 保留该属性维持列表横向排列 */
}
.container__listItem {
  display: inline-block;
  margin-right: 1em;
  white-space: normal; /* 重置列表项的white-space，确保内部元素正常换行 */
  vertical-align: top; /* 让所有卡片顶部对齐，避免高度不一致导致错位 */
}
/* 可选：处理超长无空格字符的溢出 */
.c-card__details h3,
.c-card__details p {
  word-wrap: break-word;
}

关键修改说明 #

1. 重置white-space：在.container__listItem和.c-card上设置white-space: normal，抵消容器nowrap属性的继承，让卡片内部的标题和描述文本能正常换行，同时让max-width生效限制卡片最大宽度。
2. 优化滚动体验：把overflow: x-scroll改为overflow-x: auto，只有当内容超出容器宽度时才显示横向滚动条，视觉上更整洁。
3. 对齐卡片：添加vertical-align: top让所有卡片顶部对齐，避免因不同卡片内容高度差异导致的布局错位。
4. 处理极端文本：可选的word-wrap: break-word可以解决超长无空格字符串（比如连续字母或符号）的溢出问题。

完整示例代码 #

<ul class="container">
  <li class="container__listItem">
    <div class="c-card">
      <div class="c-card__image">
        <picture class="e-picture" id="js-picture">
          <source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
          <img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
        </picture>
      </div>
      <div class="c-card__details">
        <h3>Lorem ipsum dolor sit amete</h3>
        <p>Lorem ipsum dolor sit amet,</p>
      </div>
    </div>
  </li>
  <li class="container__listItem">
    <div class="c-card">
      <div class="c-card__image">
        <picture class="e-picture" id="js-picture">
          <source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
          <img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
        </picture>
      </div>
      <div class="c-card__details">
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodt Lorem ipsum dolo.</h3>
        <p>Lorem ipsum dolo.</p>
      </div>
    </div>
  </li>
  <li class="container__listItem">
    <div class="c-card">
      <div class="c-card__image">
        <picture class="e-picture" id="js-picture">
          <source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
          <img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
        </picture>
      </div>
      <div class="c-card__details">
        <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nec ullamcorper sit amet risus nullam eget felis.</p>
      </div>
    </div>
  </li>
  <li class="container__listItem">
    <div class="c-card">
      <div class="c-card__image">
        <picture class="e-picture" id="js-picture">
          <source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
          <img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
        </picture>
      </div>
      <div class="c-card__details">
        <h3>Title Here</h3>
        <p>Helo hello heleljaeflfj; ajfdklsjakc</p>
      </div>
    </div>
  </li>
  <li class="container__listItem">
    <div class="c-card">
      <div class="c-card__image">
        <picture class="e-picture" id="js-picture">
          <source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
          <img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
        </picture>
      </div>
      <div class="c-card__details">
        <h3>Title Here</h3>
        <p>Helo hello heleljaeflfj; ajfdklsjakc</p>
      </div>
    </div>
  </li>
  <li class="container__listItem">
    <div class="c-card">
      <div class="c-card__image">
        <picture class="e-picture" id="js-picture">
          <source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
          <img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
        </picture>
      </div>
      <div class="c-card__details">
        <h3>Title Here</h3>
        <p>Helo hello heleljaeflfj; ajfdklsjakc</p>
      </div>
    </div>
  </li>
  <li class="container__listItem">
    <div class="c-card">
      <div class="c-card__image">
        <picture class="e-picture" id="js-picture">
          <source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
          <img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
        </picture>
      </div>
      <div class="c-card__details">
        <h3>Title Here</h3>
        <p>Helo hello heleljaeflfj; ajfdklsjakc</p>
      </div>
    </div>
  </li>
</ul>

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