Os cards que estão maiores que os demais, tem duas linhas na descrição. Os outros tem apenas uma linha. Uma solução simplista seria resumir a descrição em uma linha ou colocar todos com quantidade de linhas iguais. Lembrando que isso é um atalho pra solução. Gostaria de saber com o professor ou quem possa ajudar, qual seria a solução com código. Obrigado!!!
hoje, com a Alura e o Google Gemini
Oi, José, como vai?
Sua sugestão de alterar as informações para que todas ficassem com a mesma quantidade de linhas ou caracteres é algo interessante e que resolve o problema de forma simples. Mas caso queira uma solução que utilize código, uma abordagem seria limitar o tamanho do parágrafo com overflow-hidden para esconder o texto excedente e usar text-truncate para adicionar reticências ao final do texto visível, indicando que ele foi cortado. Isso garantirá que, independentemente do tamanho da tela, o texto dentro do parágrafo não ultrapasse uma linha.
O código ficaria assim:
<div class="card-body">
<h5 class="card-title fw-bold">Camiseta conforto</h5>
<p class="card-text overflow-hidden text-truncate">Multicores e tamanhos. Tecido de algodão 100% fresquinho para o verão. Modelagem
unissex.
</p>
<p class="fw-bold">R$70,00</p>
<a href="#" class="btn btn-primary botao-lilas rounded-0 border-0">Ver mais</a>
</div>
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!