CSS - Align text to the center of the screen, exceeding the size of the div?

Question

I have a DIV located in the center of the screen, with absolute position. I intend to put a text in the middle of it, that if it is larger than the div, go beyond its limits on the right and left, as in the photo above. Is it possible to do that? I will replace one text with another every time, so I can’t just manually define a margin-left, for example.

<div class="pai">
  <p>Texto aqui para ultrapassar a div</p>
</div>

.pai{
position: absolute;
margin: auto;
text-align: center;
height: 100px;
width: 100px;
}

Answer 1

It is possible yes, basically you need to put a no-wrap in the <p>

.pai {
  position: absolute;
  margin: auto;
  text-align: center;
  height: 100px;
  width: 100px;
  border: 1px solid #000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  /* centraliza o texto no pai */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* não deixa o texto quebrar linha */
.pai > p {
  white-space: nowrap;
}

<div class="pai">
  <p>Texto aqui para ultrapassar a div</p>
</div>