CSS卡片文本增大时无法自适应调整尺寸问题求助

问题根源 #

1. 卡片设置width: 100%，强制占满父容器宽度，无法随内容自然撑开
2. 中间卡片用transform: scale(1.1)仅做视觉放大，实际布局尺寸未调整，导致内容溢出
3. ul默认内边距未清除，加上卡片无内边距，文本容易超出边界

修复方案 #

修改CSS代码如下：

.pricing-box {
  margin: 5rem 0rem;
}

.pricing-box header {
  margin-bottom: 2rem;
  text-align: center;
}

.pricing-box .card-container {
  display: flex;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
  gap: 2rem; /* 给卡片之间添加间隙 */
}

.pricing-box .card-container .card:nth-of-type(2) {
  margin-left: 0;
  box-shadow: none;
  /* 替换transform缩放，改用内边距+宽度调整实现真实放大 */
  padding: 1.2rem;
  width: clamp(300px, 32%, 370px);
  z-index: 2;
}

.pricing-box .card-container .card {
  /* 用clamp设置弹性宽度，兼顾适配性与内容撑开需求 */
  width: clamp(280px, 30%, 350px);
  padding: 1rem; /* 给卡片内部留空间，避免文本贴边 */
  box-sizing: border-box; /* 确保内边距不额外增加卡片宽度 */
}

.pricing-box .card-container ul {
  margin: 0;
  padding: 0; /* 清除ul默认的左侧内边距 */
}

.pricing-box .card-container ul li {
  list-style: none;
  margin-top: 1rem;
  text-align: center; /* 文本居中更贴合定价卡片风格 */
}

.pricing-box .card-container ul li.price {
  font-size: 3rem;
}

关键调整说明 #

• 用clamp()设置卡片弹性宽度：保证移动端有最小显示宽度，桌面端不超最大宽度，同时允许内容撑开卡片
• 添加box-sizing: border-box与内边距：让卡片内部文本有缓冲空间，且内边距不会破坏宽度设置
• 替换transform: scale：通过调整内边距和宽度实现真实放大，避免视觉放大导致的内容溢出
• 清除ul默认内边距：避免列表内容偏移溢出卡片

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