Javascript CSS-如果重叠，则页眉字体大小较小

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

我目前正在使用：

wordbreak:breakall但重叠仍然存在

另外，我还是一个初学者，如果这个问题听起来太简单，我很抱歉

我的代码：

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

及

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

div#头{
字号：500；
填充：0；
保证金：0；
颜色：rgb（41,40,40）；
背景色：rgb（248248248248）；
}
p{
字体大小：50磅；
文本对齐：居中；
颜色：rgb（63,61,61）；
字体风格：普通；
字体变体：正常；
字体大小：400；
}
p1{
字号：20pt；
文本对齐：居中；
颜色：rgb（63,61,61）；
字体风格：普通；
字体变体：正常；
字体大小：400；
}

正文
正文

正文
您可以发布HTML代码以查看哪些元素重叠吗？`.container{position:absolute；top:0；left:0；padding:5%；}`和`.container2{位置：绝对；底部：0；边距底部：30px；宽度：100%；}`基本上，当我的第一个容器的标题太长时，它将与我的第二个容器重叠，我希望调整其大小，使其不会重叠。请编辑您的问题以发布代码。注释框中的代码很难阅读，几乎无法格式化。我已编辑了我的问题，并将代码包含在其中。我们需要查看相关内容HTML代码，@JasonKryschwaskiDon不介意css边距：0；字体变体：正常；脱节。我似乎不明白这代表什么。你能告诉我，为了改变我的代码，我应该关注这段代码的哪一部分吗？这是完全错误的。不要发明像
这样的新标记，这些代码与问题根本没有关系。
.container2{ position: absolute; bottom: 0; margin-bottom: 30px; width: 100%; }