CSS - 如果重叠，则较小的标题字体大小

Question

如果标题与另一个元素重叠，如何减小标题的字体大小？

我目前正在使用：word-break: break-all;，但仍然存在重叠。

附：我还是个初学者，如果这个问题听起来太简单了，请见谅。

我的代码：

.container{ position: absolute; top: 0; left: 0; padding: 5%; } 

和

.container2{ position: absolute; bottom: 0; margin-bottom: 30px; width: 100%; }

基本上，当我在 .container 中有 <h2> 时，如果文本太长，它将与 .container2 中的 <h2> 文本重叠。如何避免这种情况或正确调整文本大小？

Answer 1

div#header{
    font-weight: 500;
    padding: 0;
	  margin: 0;
    color: rgb(41, 40, 40);
    background-color: rgb(248, 248, 248);
}

p{
    font-size: 50pt;
    text-align: center;
    color: rgb(63, 61, 61);
    font-style: normal;
	  font-variant: normal;
    font-weight: 400;
}
p1{
    font-size: 20pt;
    text-align: center;
    color: rgb(63, 61, 61);
    font-style: normal;
	  font-variant: normal;
    font-weight: 400;
}

        <div class="header">
        TEXT
            <p>TEXT</p>
            <p1>TEXT</p1>
        </div>