0

Buen dia Devs. Como puedo realizar para que el card no se expanda y se haga demasiado grande cuando el texto que tiene la descripcion es demasiado largo.. Se que con overflow-y se podria solucionar ese problema pero cuando lo aplico no realiza el efecto, solo se coloca la barra de scroll dentro del card pero no toma el contenido largo del texto... Que estoy realizando mal?

introducir la descripción de la imagen aquí

el codigo html para generar el card es este

<div class="container">
    <div class="card shadow  my-4  bg-white rounded" >
            <div class="row no-gutters">
                <div class="col-md-4">
                
                    <img src="images/<?php echo $producto->imagenPortada?>" class="card-img h-100">
                </div>
                <div class="col-md-8 mt-0">
                    <div class="card-body">
                        <h5 class="card-title font-weight-bold"><?php echo $producto->nombreArea ?></h5>
                        <p class="card-text"><?php echo $producto->descripcionArea ?></p>
                        
                    </div>
                </div>
            </div>
    </div>

    </div>

y con el css intento realizar el overflow y.. pero no funciona.. les anexo el codigo

img {
    display: block;
    max-width: 100%;
    height: auto;
  }
  .card{
    
      border-radius: 4px;
      background: #fff;
      box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
        transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
    /* padding: 14px 80px 18px 36px; */
    cursor: pointer;
  }
  
  .card:hover{
       transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  }

espero puedan ayudarme llevo 2 dias buscando una solucion

1 respuesta 1

2

Ponle un height al card para que a partir de ahí aplique un scroll al contenido que haga overflow.

.card{
  background-color: green;
  height: 15rem;
  overflow-y: scroll;
}
<div class="card">
  contenido<br>
  contenido<br>
  contenido<br>
  contenido<br>
  contenido<br>
  contenido<br>
  contenido<br>
  contenido<br>
  contenido<br>
  contenido<br>
  contenido<br>
  contenido<br>
  contenido<br>
  contenidof<br>
</div>

1
  • Gracias! me sirvio demasiado y ya logre lo que requeria Commented el 22 jun. 2021 a las 15:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.