如何限制grid元素内文本不超出边框并动态调整.desc类字体大小

实现方案 #

你需要的是文本长度超过容器可用空间时仅缩小字体、短文本保持默认大小不拉伸的效果，可通过以下两种方案实现：

方案1：纯CSS实现（无JS，兼容性好） #

先给卡片容器加溢出兜底，再给.desc类配置动态字体限制即可：

/* 给所有卡片加内边距和溢出兜底 */
.ClothOne, .ClothTwo, .ClothThree { 
  border: solid black 2px;
  padding: 10px;
  overflow: hidden;
}

.desc {
  font-family: 'Fredoka One', cursive;
  font-family: 'Rajdhani', sans-serif;
  line-height: 1.4;
  /* 字体大小规则：最小0.8rem，最大1rem，中间随容器宽度自适应调整 */
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  /* 限制描述文本的最大高度，可根据卡片剩余空间自行调整数值 */
  max-height: 5em;
}

该方案短文本会保持1rem的默认字号不会拉伸填充空白，长文本会自动缩小字体适配空间，极端超长文本会被隐藏不会溢出边框。

方案2：JS实现（精准适配每段文本长度） #

如果需要完全适配每段文本的长度，避免极端情况文本被隐藏，可以用JS动态计算字号：

1. 先给.desc加基础样式：

.desc {
  font-family: 'Fredoka One', cursive;
  font-family: 'Rajdhani', sans-serif;
  line-height: 1.4;
  max-height: 5em;
  overflow: hidden;
}

2. 在HTML的</body>标签前插入以下JS代码：

document.querySelectorAll('.desc').forEach(descEl => {
  const maxFontSize = 16; // 最大字号，单位px
  const minFontSize = 12; // 最小字号，单位px
  let currentSize = maxFontSize;
  descEl.style.fontSize = `${currentSize}px`;
  // 文本溢出则逐步缩小字号
  while (currentSize > minFontSize && descEl.scrollHeight > descEl.clientHeight) {
    currentSize -= 0.5;
    descEl.style.fontSize = `${currentSize}px`;
  }
})

该方案会自动为每段描述匹配刚好不溢出的最大字号，短文本不会拉伸，长文本自动缩小，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Roald Andre Kvarv