React Depoiments滑块组件文本溢出问题求助

问题根源是.dpBoxes的white-space: nowrap强制所有内容（包括子元素里的文本）不换行，同时.depoiments的inline-block属性和视口宽度设置冲突，导致文本无法正常折行。以下是具体修复步骤：

1. 重构.dpBoxes布局逻辑 #

移除white-space: nowrap，改用flex布局实现子元素横向排列，同时添加过渡动画提升滑动体验：

.dpBoxes {
  display: flex;
  transition: transform 0.3s ease;
  width: fit-content; /* 让容器宽度适配所有子元素总宽度 */
}

2. 修复.depoiments文本换行与宽度 #

添加white-space: normal强制文本正常换行，同时调整宽度避免溢出视口：

.depoiments {
  border: 1px solid var(--darkBlue);
  border-radius: 16px;
  padding: 15px;
  margin-right: 10px;
  width: calc(100vw - 20px); /* 减去边距，防止溢出 */
  display: flex;
  flex-direction: column;
  align-items: center; /* 内容居中优化视觉效果 */
  white-space: normal;
}

3. 适配平板及以上屏幕宽度 #

在媒体查询中调整.depoiments宽度，匹配容器的max-width：

@media (min-width: 768px) {
  .dpBoxes {
    max-width: 90%;
  }
  .depoiments {
    width: calc(90vw - 20px); /* 匹配容器宽度 */
  }
  /* 其他原有样式保留 */
}

4. 修正按钮点击事件绑定 #

把onClick从图标移到Button组件上，确保点击整个按钮区域都能触发切换：

<Button className="dpButton" onClick={prev}>
  <GrFormPrevious />
</Button>
<Button className="dpButton" onClick={next}>
  <GrFormNext />
</Button>

完成以上修改后，文本会正常换行，滑块也能流畅切换。

内容的提问来源于stack exchange，提问作者Carlos Henrique R. Pereira