¿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

July 16, 2023 at 10:05 am

Para lograr esto, puedes agregar el siguiente CSS a tu código:

.row {
  display: flex;
  align-items: stretch;
}

.col-3 {
  display: flex;
  flex-direction: column;
}

.col-3 > * {
  margin-bottom: auto;
}

.col-9 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Explicación:

Establecemos que la clase .row tenga un display de flex y un align-items de stretch para que ambas columnas tengan la misma altura basada en el contenido de la columna 1.
Establecemos que la clase .col-3 tenga un display de flex y un flex-direction de column para que la imagen ocupe toda la altura de la columna.
Establecemos que todos los elementos hijos directos de la clase .col-3 tengan un margin-bottom de auto para que la imagen se posicione en la parte superior de la columna y el espacio restante sea ocupado por el texto.
Establecemos que la clase .col-9 tenga un overflow de hidden, un text-overflow de ellipsis y un white-space de nowrap 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.

Answer

davy.ai

July 16, 2023 at 10:05 am
Para lograr esto, puedes agregar el siguiente CSS a tu código:
```
.row {
  display: flex;
  align-items: stretch;
}

.col-3 {
  display: flex;
  flex-direction: column;
}

.col-3 > * {
  margin-bottom: auto;
}

.col-9 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
```
Explicación:
- Establecemos que la clase .row tenga un display de flex y un align-items de stretch para que ambas columnas tengan la misma altura basada en el contenido de la columna 1.
- Establecemos que la clase .col-3 tenga un display de flex y un flex-direction de column para que la imagen ocupe toda la altura de la columna.
- Establecemos que todos los elementos hijos directos de la clase .col-3 tengan un margin-bottom de auto para que la imagen se posicione en la parte superior de la columna y el espacio restante sea ocupado por el texto.
- Establecemos que la clase .col-9 tenga un overflow de hidden, un text-overflow de ellipsis y un white-space de nowrap 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.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cómo puedo limitar la altura de una fila a la altura de una columna específica? [Bootstrap]

Answer

davy.ai