How not to allow a text of a child element to overflow the parent element

Question

I would like to know how I do so that the centralized text of a child element does not overflow the parent element, I would like the text to be hidden when it is larger than the parent element, but keeps centered, for example the 1 of the text below, always stay in the middle.

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>

Answer 1

Just use overflow: hidden; since it is using flex with justify-content: center; it will already align in the center, example:

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;
  overflow: hidden;
}

p {
  position: absolute;
}

<div>
  <p>00000100000</p>
</div>