向轮播项<div>添加<p>标签后，Carousel响应式失效问题求助

问题核心 #

添加姓名/角色文本后，轮播项的宽度被文本撑开，破坏了原有的flex: 0 0 calc(100% / var(--posters-displayed))布局规则，导致轮播的响应式适配和切换逻辑失效。

具体修复步骤 #

1. 强制轮播项宽度不超出分配值

给.item添加max-width，确保它不会被文本撑开，严格遵循分配的宽度比例：

.item {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc(100% / var(--posters-displayed));
  padding: 0 5px;
  max-width: calc(100% / var(--posters-displayed)); /* 新增：限制最大宽度 */
}

2. 优化文本换行效果，替换word-break: break-all

用更友好的换行规则替代强制断词，提升文本可读性：

.item p {
  color: white;
  text-align: center;
  padding: 0 8px;
  margin: 0;
  word-wrap: break-word; /* 优先在单词间隙换行 */
  overflow-wrap: break-word; /* 兼容多浏览器 */
  hyphens: auto; /* 长单词自动添加连字符换行 */
}

3. 消除图片底部默认间距

设置图片为块级元素，避免inline元素带来的底部留白，保证布局紧凑：

.item img {
  width: 100%;
  display: block; /* 新增：消除底部间距 */
}

4. 调整显示项数的计算逻辑

把轮播项的左右padding纳入宽度计算，让--posters-displayed的数值更精准：

// 原计算：Math.ceil(clientWidth / 250)
// 调整后：把item的左右padding（共10px）算入单个项的宽度
const itemTotalWidth = 260; // 250（图片基础宽度） + 10（左右padding）
const displayed = Math.ceil(clientWidth / itemTotalWidth);

修复原理 #

• max-width确保轮播项严格遵循分配的宽度比例，不会因文本内容撑开容器，保证轮播的transform: translateX计算准确，响应式切换正常。
• 优化后的文本换行规则优先保留单词完整性，提升用户体验，同时兼容不同浏览器的换行逻辑。
• 调整显示项数的计算逻辑，避免padding导致的实际宽度超出预期，减少布局偏差。

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