Gostaria de saber como faço para que o texto centralizado de um elemento filho não transbordasse o elemento pai, queria que o texto ficasse escondido quando for maior que o elemento pai, mais que mantivesse centralizado, por exemplo o 1 do texto do exemplo abaixo, sempre ficar no meio.
body {
display: flex;
justify-content: center;
background-color: blue;
}
div {
position: relative;
display: flex;
justify-content: center;
width: 200px;
height: 200px;
background-color: green;
font-size: 48pt;
font-weight: bold;
color: red;
}
p {
position: absolute;
}
<div>
<p>00000100000</p>
</div>