Text content overflow its element tag-CodePudding

Here's the code. It's in Angular if that has something to do with it. The actual text height is overflowing the element that contains it.

#website-title {
    text-align: center;
    // font-family: "Roboto-Mono";
    font-size: 50px;
    margin: 0;
    position: absolute;
    top: 50%;
}

<p id="website-title">Poll App</p>

result:

I want the element to be the height of the content.

UPDATE: Narrowed the problem down to Angular Material. Everything is fine before doing ng add @angular/material. Then after adding material and restarting the server, I get the problem.

CodePudding user response：

Be default, the p tag will expand to fit its content. So unless you have explicitly set the p tag height to be smaller than the text content, the text will not overflow.

Try checking to see if you have set a height on the p tag.

CodePudding user response：

I found the solution but I don't know why it fixes the problem.

The problem had to do with Angular Material's typography (Angular material was installed). Sol'n - Go to index.html and remove the from the body tag.