javascript - 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%; }

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

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>