如何解决移动端HTML legend标签响应式溢出问题？

问题根源 #

问题出在两点：一是legend内部嵌套h2引发的默认样式冲突，二是长文本（如网址）在移动端未正确换行，再加上legend的特殊布局特性，最终导致边框和内容溢出屏幕。

修复方案 #

1. 调整HTML结构

移除legend内的h2标签，直接将文本放在legend中，避免标签嵌套带来的布局异常：

<section id="projects">
        <h1>Projects</h1>
        <div class="project">
            <fieldset>
            <legend>tharinedirisinghe.github.io/portfolio/</legend>
            <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>
            </fieldset>
        </div>
        
        <!-- Add more projects as needed -->
    </section>

2. 优化CSS样式

针对legend和fieldset调整样式，确保移动端适配：

/* Add styles for legend and fieldset */
legend {
    font-weight: bold;
    font-size: 1.2em;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    /* 关键修复：确保legend宽度不超父容器，强制文本换行 */
    width: 100%;
    box-sizing: border-box;
    white-space: pre-wrap; /* 处理长文本/网址换行 */
    word-break: break-all; /* 强制长单词/网址拆分换行 */
}

fieldset {
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 8px;
    max-width: 100%;
    box-sizing: border-box;
    /* 给顶部留空间，避免legend覆盖边框 */
    padding-top: 40px;
    position: relative;
}

/* 调整legend位置，解决默认布局的边框覆盖问题 */
legend {
    position: absolute;
    top: -18px;
    left: 10px;
    width: calc(100% - 20px);
}

.project {
    padding: 10px;
    margin: 10px 0;
}

.project h4, .project p, .project ul {
    font-size: 1em;
    padding: 5px 0;
    margin: 5px 0;
}

.project ul {
    padding-left: 20px;
}

.project ul li {
    list-style-type: disc;
}

@media (max-width: 768px) {
    legend {
        font-size: 1em;
        padding: 5px;
        top: -14px;
    }

    fieldset {
        padding: 10px;
        padding-top: 30px;
    }

    #projects {
        padding: 20px;
        margin: 20px;
        margin-bottom: 50px;
    }

    #projects h1 {
        font-size: 1.5em;
    }

    .project h4, .project p, .project ul {
        font-size: 0.9em;
    }
}

关键修复说明 #

• width: 100% + box-sizing: border-box：限制legend宽度不超出父容器fieldset
• white-space: pre-wrap + word-break: break-all：强制长文本和网址在移动端换行，避免溢出
• 绝对定位legend并调整fieldset内边距：解决legend默认布局导致的边框覆盖问题，同时保证移动端布局紧凑

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