如何在不重叠文本的情况下将放大的 h1 放入 div 中？答案

【问题标题】：How to fit an enlarged h1 within a div without the text overlapping?如何在不重叠文本的情况下将放大的 h1 放入 div 中？
【发布时间】：2021-12-25 05:45:42
【问题描述】：

我一直在尝试为我的 h1 标签创建响应式布局。当我不更改它的font-size 时，它工作得非常好，但是一旦我放大字体大小，文本就会在缩小窗口大小后与background-image 重叠。有没有办法解决这个问题？

这是我的代码：

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

.main-page-font {
    background-image: linear-gradient(to left, blue, grey);
    padding: 16em 10em;
    background-size: cover;
}

.headers h1,
.headers h3 {
    color: azure;
}

.headers h1 {
    font-size: 8.5em;
}

<body>

    <div class="main-page-font">
        <div class="headers">
            <h1>This is a long header for this page</h1>
            <h3>Fit me within this space please</h3>
        </div>
    </div>

</body>

【问题讨论】：

标签： html css responsive-design responsive

【解决方案1】：

解决您的问题的方法是将 CSS 文件更改为此并检查不同屏幕尺寸的结果：

给body 一个高度，以后可以在您在 HTML 文件中添加更多元素时更改该高度
给main-page-font一个宽度和一个高度来封装headers并防止溢出
给main-page-font 一个display: inline-block; 以防止它占用多余的空间

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

    height: 100vh;
}

.main-page-font {
    background-image: linear-gradient(to left, blue, grey);
    width: fit-content;
    height: fit-content;
    display: inline-block;
    background-size: cover;
}

.headers h1,
.headers h3 {
    color: azure;
}

h1 {
    font-size: 15em;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="1.css">
    <title>Document</title>
</head>
<body>
    <div class="main-page-font">
        <div class="headers">
            <h1>This is a long header for this page</h1>
            <h3>Fit me within this space please</h3>
        </div>
    </div>
</body>
</html>

希望这能解决您的问题！

【讨论】：

谢谢安德鲁。我给容器一个 80% 的宽度（以 % 为单位），并给子元素另一个 100% 的宽度（它基本上覆盖了其父元素的 100% 宽度）。这对我来说非常好。