[Dúvida] Texto ultrapassando o tamanho da div pai, o que fazer? | Front-end

1
resposta

por Laura Ferreira Marquez

| 157k xp | 6 posts

Bom dia, estou fazendo um projeto de uma calculadora em React/JS e me deparei com um problema onde o texto que aparece quando clico nos numeros ultrapassa o tamanho da própria calculadora, como faço para delimitar o tamanho desse texto e deminui-lo quando for ultrapassar o tamanha da div pai?

O código com a parte dos resultado(.resultado), dos numeros acima do resultado(.conta) e da div pai(.container):


.container {
    width: 375px;
    height: 812px;
    background-color: #17181A;
    margin: auto;
    border: 1px;
    border-radius: 2.5em;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-content: flex-end;
    
}


.conta {
    color: #828282;
    font-family: Poppins;
    font-size: 24px;
    font-style: normal;
    font-weight: 200;
    line-height: 1;

    
}

.resultado {
    color: #D4D4D2;
    font-family: Poppins;
    font-size: 60px;
    font-style: normal;
    font-weight:200;
    line-height: normal;
    padding-right: 0.5em;
   
}

Exemplo:

1 resposta

por Renan Lima

| 2890.9k xp | 6020 posts

Instrutor Scuba Team

28/11/2023

Olá, Laura!

Para delimitar o tamanho do texto e diminuí-lo quando ele ultrapassar o tamanho da div pai, você pode tentar utilizar a propriedade CSS overflow em conjunto com text-overflow e white-space.

Você pode adicionar a seguinte configuração à classe .resultado no seu código CSS:

.resultado {
    color: #D4D4D2;
    font-family: Poppins;
    font-size: 60px;
    font-style: normal;
    font-weight: 200;
    line-height: normal;
    padding-right: 0.5em;
    overflow: hidden; /* oculta o texto que ultrapassar o tamanho da div */
    text-overflow: ellipsis; /* adiciona reticências (...) quando o texto é cortado */
    white-space: nowrap; /* impede que o texto seja quebrado em várias linhas */
}

Dessa forma, o texto será cortado e exibirá reticências quando ultrapassar o tamanho da div pai.

Espero ter ajudado e bons estudos!