区域 " />

本文详解如何通过 CSS 优化 的换行与溢出问题，使其在移动设备上自适应显示；同时指出误用 的语义问题，并提供更合适的替代方案。

本文详解如何通过 css 优化 `

` 的换行与溢出问题，使其在移动设备上自适应显示；同时指出误用 `

` 的语义问题，并提供更合适的替代方案。

在构建个人作品集网站时，开发者常借助 <fieldset></fieldset> + <legend></legend> 组合实现项目区块的视觉分组与标题强调。然而，这种用法存在语义偏差和响应式缺陷：<fieldset></fieldset> 在 HTML 规范中专用于表单控件分组（MDN 官方定义），而作品展示属于内容结构，非表单逻辑——强行使用不仅影响可访问性（如屏幕阅读器误读），也加剧样式调试难度。

核心问题在于 <legend></legend> 默认不支持强制断行，尤其当 URL（如 tharinedirisinghe.github.io/portfolio/）这类无空格长字符串出现在小屏设备时，会横向溢出容器，破坏布局。仅靠 white-space: normal 和 word-wrap: break-word 不足以解决，因为现代浏览器对 URL 等连续字符序列默认不换行，必须启用更激进的断行策略。

✅ 正确解法是添加 word-break: break-all（或 break-word，但 break-all 兼容性更稳）：

legend {
  font-weight: bold;
  font-size: 1.2em;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-wrap: break-word;     /* 旧版兼容 */
  word-break: break-all;     /* 关键：强制截断长单词/URL */
  overflow: hidden;
}

并在移动端媒体查询中保持该属性生效：

@media (max-width: 768px) {
  legend {
    font-size: 1em;
    padding: 5px;
    word-break: break-all; /* 必须重复声明，避免被覆盖 */
  }
  /* 其他响应式调整... */
}

⚠️ 重要提醒：语义重构建议
虽然上述 CSS 能“修复”显示问题，但更专业的做法是弃用 <fieldset></fieldset>/<legend></legend>，改用语义化、可控性更强的结构：

<section id="projects">
  <h1>Projects</h1>
  <article class="project">
    <div class="project-header">
      <h2>tharinedirisinghe.github.io/portfolio/</h2>
    </div>
    <div class="project-body">
      <h4>Description:</h4>
      <p>Explore my personal portfolio website showcasing my skills, projects, and professional journey.</p>
      <h4>Technologies Used:</h4>
      <ul>
        <li>HTML, CSS, JavaScript</li>
        <li>Hosted on GitHub Pages</li>
      </ul>
      <h4>My Contribution:</h4>
      <p>As a full-stack developer, I created the entire website and am currently working on the backend.</p>
    </div>
  </article>
</section>

对应推荐样式（更轻量、更灵活）：

.project-header {
  font-weight: bold;
  font-size: 1.2em;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  margin-bottom: 15px;
  word-break: break-all;
  overflow-wrap: break-word;
}

@media (max-width: 768px) {
  .project-header {
    font-size: 1em;
    padding: 6px;
  }
}

✅ 优势总结：

• ✅ 语义正确：<article></article> 表达独立作品，<h2></h2> 明确层级；
• ✅ 样式自由：不受 <fieldset></fieldset> 内置边框/间距限制；
• ✅ 可访问性提升：避免辅助技术混淆；
• ✅ 维护友好：结构清晰，CSS 解耦度高。

最终，响应式 <legend></legend> 的本质不是“让错误标签变好”，而是识别设计意图后，选择语义正确、样式可控的现代方案。