如何在div内适配放大的h1标签，避免文字出现重叠问题

你遇到的文字与背景重叠问题核心有两个原因：

• h1使用了固定的8.5em字号，窗口缩小时字号不会同步缩小，文字换行后整体高度大幅增加
• 背景容器.main-page-font的padding使用了固定em值，无法适配内容高度的变化，最终导致文字超出背景区域

推荐修复代码 #

无需修改HTML，直接替换CSS即可：

body {
    margin: 0;
    padding: 0;
    background-color: orangered;
}

.main-page-font {
    background-image: linear-gradient(to left, blue, grey);
    /* 用最小高度配合flex居中，适配任意内容高度 */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 用动态单位设置内边距，适配不同屏幕尺寸 */
    padding: 2rem 5vw;
    box-sizing: border-box;
    background-size: cover;
}

.headers h1,
.headers h3 {
    color: azure;
    margin: 0.6em 0;
}

.headers h1 {
    /* 响应式字号：最小2.5rem，最大8.5rem，中间随窗口宽度自动调整 */
    font-size: clamp(2.5rem, 8vw, 8.5rem);
    /* 强制长文本正常换行，避免溢出 */
    word-break: break-word;
}

可选补充方案 #

如果你需要保留h1固定字号不随窗口变化，可以给.main-page-font添加height: auto; 同时将上下padding调整为更大的动态值，即可保证背景始终包裹文字内容。

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