1

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>

1 Resposta 1

4

Basta usar overflow: hidden; já que esta usando flex com justify-content: center; ele já irá alinhar no centro, exemplo:

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .