2

imagem do problema

Olá, pessoal. Gostaria de fazer uma transição ao clicar no botão pequeno para um botão com frase e com maior width. Mas ocorre o problema da frase não acompanhar a largura do botão. Queria que a frase ficasse na mesma linha, mas ao clicar ela primeiramente fica com quebra pra depois se alinhar ao botão. Agradeço se puder me ajudar!

o botão está assim:

const quality = ['TEXTURA FLUÍDA E AÇÃO ANTIOXIDANTE']

const buttons = document.querySelectorAll('.btn')

buttons.forEach((button, indice)=>{
    button.addEventListener('click', ()=> {
      if(button.innerText === '+'){
        button.innerText = quality[indice]
        button.style.cssText = 
        'width: 280px;' 
        
      }else{
         button.innerText = '+'
         button.style.cssText = 
         'width: 25px;' 
      }
    })
  })
.btn {   
    width: 25px;
    height: 25px;
    margin: 10px 40px 50px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    background: #ffff;
    color: #000000;
    border: 1px solid #000000;
    transition: 0.5s;
}
<button class="btn">+</button>

7

1 Resposta 1

2

Basta você utilizar as propriedades no CSS:

  • white-space: nowrap; para que não haja a quebra de linha no texto;
  • overflow: hidden; para ocultar o texto que não cabe no elemento durante a transição;

const quality = ['TEXTURA FLUÍDA E AÇÃO ANTIOXIDANTE']

const buttons = document.querySelectorAll('.btn')

buttons.forEach((button, indice)=>{
    button.addEventListener('click', ()=> {
      if(button.innerText === '+'){
        button.innerText = quality[indice]
        button.style.cssText = 
        'width: 280px;' 
        
      }else{
         button.innerText = '+'
         button.style.cssText = 
         'width: 25px;' 
      }
    })
  })
.btn {   
    width: 25px;
    height: 25px;
    margin: 10px 40px 50px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 12px;
    cursor: pointer;
    background: #ffff;
    color: #000000;
    border: 1px solid #000000;
    transition: 0.5s;
    white-space: nowrap;
    overflow: hidden;
}
<button class="btn">+</button>

1
  • Nosssa, muito obrigada!!! Resolvido
    – Letícia
    7/10/2022 às 12:47

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 .