a标签宽度异常求助：文本变更导致链接尺寸超出限制

修改图片下方文本后，即使给.projectText设置了50%宽度，a标签仍会因文本过长过度拉伸，期望所有a标签保持蓝色文件夹示例的尺寸。问题效果如下：

现有代码 #

CSS

.projectsContainer {
  display: block;
  width: 80%;
  align-items: center;
  margin: auto;
}

.projectLink {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 20px;
  border: 2px yellow solid;
}

.projectText {
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 50%;
}

a {
  border: 2px red solid;
}

img {
  height: 150px;
  width: 200px;
  border: 2px orange solid;
}

#topText {
  color: #ffffff;
  margin: 5px 5px 5px 5px;
  text-align: center;
}

HTML

<main>
  <h1 id="topText">These are the projects I have worked on!</h1>
  <div class="projectsContainer">
    <div class="projectLink">

      <!-- TODO: Fix out of bounds a link -->
      <a href="https://legacy.curseforge.com/minecraft/mc-addons/enhanced-blast-furnace-datapack" target="_blank">
        <img src="../images/Yellow_Folder.png" loading="lazy" />
        <p class="projectText">Enhanced Blast Furnace. A datapack for Minecraft</p>
      </a>

      <a href="" target="_blank">
        <img src="../images/Green_Folder.png" loading="lazy">
        <p class="projectText">Enhanced Blast Furnace. A datapack for Minecraft</p>
      </a>
      <a href="">
        <img src="../images/Blue_Folder.png" loading="lazy">
        <p class="projectText">Project</p>
      </a>
    </div>
  </div>
</main>

问题原因 #

.projectLink是flex容器，内部的a标签默认会根据内容宽度自适应拉伸。.projectText的width:50%基于父元素a标签的宽度计算，文本越长，a标签被撑得越宽，反过来又让.projectText实际宽度变大，形成恶性循环。

优化方案 #

无需给a标签设置固定宽度，通过调整flex属性和文本约束实现统一尺寸：

修改后的CSS

.projectsContainer {
  display: block;
  width: 80%;
  align-items: center;
  margin: auto;
}

.projectLink {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-top: 20px;
  border: 2px yellow solid;
  gap: 10px; /* 可选：添加卡片间距提升美观度 */
}

/* 为项目链接卡片单独设置样式，避免影响全局a标签 */
.project-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 1 auto; /* 禁止放大，必要时缩小，自适应宽度 */
  max-width: 200px; /* 和图片宽度一致，限制卡片最大宽度 */
  border: 2px red solid;
  text-decoration: none; /* 可选：去掉链接下划线 */
}

.projectText {
  text-align: center;
  width: 100%; /* 占满父容器宽度 */
  word-wrap: break-word; /* 长文本自动换行 */
  margin: 8px 0; /* 调整文本与图片的间距 */
}

img {
  height: 150px;
  width: 200px;
  border: 2px orange solid;
}

#topText {
  color: #ffffff;
  margin: 5px 5px 5px 5px;
  text-align: center;
}

修改后的HTML

<main>
  <h1 id="topText">These are the projects I have worked on!</h1>
  <div class="projectsContainer">
    <div class="projectLink">

      <a href="https://legacy.curseforge.com/minecraft/mc-addons/enhanced-blast-furnace-datapack" target="_blank" class="project-card">
        <img src="../images/Yellow_Folder.png" loading="lazy" />
        <p class="projectText">Enhanced Blast Furnace. A datapack for Minecraft</p>
      </a>

      <a href="" target="_blank" class="project-card">
        <img src="../images/Green_Folder.png" loading="lazy">
        <p class="projectText">Enhanced Blast Furnace. A datapack for Minecraft</p>
      </a>
      <a href="" class="project-card">
        <img src="../images/Blue_Folder.png" loading="lazy">
        <p class="projectText">Project</p>
      </a>
    </div>
  </div>
</main>

方案说明 #

• .project-card的flex: 0 1 auto确保卡片不会被flex容器强制放大，仅根据内容和最大宽度调整尺寸
• max-width:200px与图片宽度保持一致，保证所有卡片尺寸统一，长文本也不会撑破容器
• word-wrap: break-word让超长文本自动换行，避免横向拉伸
• 将a标签设为flex容器并垂直居中，让图片和文本对齐更整齐

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