如何让卡片滑块中<p>标签文本自动换行而非溢出容器？

你的问题出在<p>标签里的连续无空格长串字符无法自动换行，之前用word-wrap: break-word没生效，是因为缺少配套的换行规则和更适配的断词属性。

解决方案 #

修改.container p的CSS样式，添加强制换行和断词的属性：

.container p {
  color: #000;
  font-size: 20px;
  white-space: normal; /* 确保文本允许自动换行 */
  overflow-wrap: break-word; /* 标准断词属性，替代旧的word-wrap */
  word-break: break-all; /* 针对无空格超长串，强制在任意字符处断行 */
}

修改后的完整代码 #

CSS部分

div.scroll-container {
  background-color: #7289da;
  white-space: nowrap;
  padding: 10px;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.card {
  float: none; 
  display: inline-block;
  zoom: 1;   
  padding: 10px;
  width: 375px;
  height: 525px;
}

.container {
  padding: 2px 16px;
  background-color: #fff;
  color: #000;
  height: 200px;
}

.container p {
  color: #000;
  font-size: 20px;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-all;
}

HTML部分

<div class="scroll-container" id="cardslist">
  <div class="card">
    <img src="icon.png" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><b>John Doe</b></h4>
      <p>Architect & Engineernjifnnjknhbgvfdfcgvhbjnkmmnbgvfd</p>
    </div>
  </div>

  <div class="card">
    <img src="icon.png" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><b>John Doe</b></h4>
      <p>Architect & Engineer</p>
    </div>
  </div>

  <div class="card">
    <img src="icon.png" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><b>John Doe</b></h4>
      <p>Architect & Engineer</p>
    </div>
  </div>
  <div class="card">
    <img src="icon.png" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><b>John Doe</b></h4>
      <p>Architect & Engineer</p>
    </div>
  </div>
</div>

补充说明 #

• white-space: normal：明确文本换行规则，避免意外继承上级的nowrap属性（这里scroll-container的nowrap仅控制卡片横向排列，不影响内部文本）。
• overflow-wrap: break-word：让浏览器在容器边界处拆分长单词，适配宽度。
• word-break: break-all：针对完全无空格的超长字符，强制在任意位置断行，彻底解决溢出问题。

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