0
294
ViewsText content overflow its element tag
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.
2 answers
Answer question0
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.
0
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 class="mat-typography" from the body tag.