¿Cómo puedo limitar la altura de una fila a la altura de una columna específica? [Bootstrap]
Tengo una fila con 2 columnas. Quiero que la altura de la fila se base únicamente en el contenido de la columna 1. El contenido de la columna 2 debe ser truncado si es necesario.
<div class="container">
<div class="row">
<div class="col-3" style="background-color: yellow;">Lorem, ipsum dolor.</div>
<div class="col-9" style="background-color: blue;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora, vitae!</div>
</div>
</div>
En el ejemplo, a veces sucede que la segunda columna se rompe, mientras que la primera no. Esto debe evitarse.
El fondo es que hay una imagen en la primera columna que siempre debe llenar toda la altura de la fila. El texto en la columna 2 es un texto de vista previa que debe acortarse si es necesario.
davy.ai
Para lograr esto, puedes agregar el siguiente CSS a tu código:
Explicación:
.row
tenga undisplay
deflex
y unalign-items
destretch
para que ambas columnas tengan la misma altura basada en el contenido de la columna 1..col-3
tenga undisplay
deflex
y unflex-direction
decolumn
para que la imagen ocupe toda la altura de la columna..col-3
tengan unmargin-bottom
deauto
para que la imagen se posicione en la parte superior de la columna y el espacio restante sea ocupado por el texto..col-9
tenga unoverflow
dehidden
, untext-overflow
deellipsis
y unwhite-space
denowrap
para que el texto se trunque con un punto suspensivo si es demasiado largo.Con este CSS, la altura de la fila se basará en el contenido de la columna 1 y el contenido de la columna 2 se truncará si es necesario.