Tengo este caso de uso simple: un título y una descripción del artículo. El título debería aparecer encima de la descripción y quiero que el título determine el ancho de toda la columna, también para la fila 'descripción'.
¿Es eso posible con CSS Grid, y si es así, cómo?
Esta es la salida deseada:
Y ese es el código, básicamente:
.grid-container {
display: grid;
grid-template-columns: 1fr;
}
<div class="grid-container">
<div class="A">
DIV A contains the TITLE
</div>
<div class="B">
DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping)
</div>
</div>
En lugar de establecer el ancho de la columna en 1fr
, use min-content
.
Con min-content
, la columna tomará todas las oportunidades de salto de línea (ajuste de texto) .
Básicamente, envuelve todo el texto hasta que la columna alcanza el ancho de la palabra más larga.
.grid-container {
display: grid;
grid-template-columns: min-content; /* formerly 1fr */
}
<div class="grid-container">
<div class="A">
DIV A contains the TITLE
</div>
<div class="B">
DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping)
</div>
</div>
Luego, suprima los saltos de línea en el cuadro de título:
.grid-container {
display: grid;
grid-template-columns: min-content;
}
.A {
white-space: nowrap;
background-color: lightgreen; /* just for illustration */
}
<div class="grid-container">
<div class="A">
DIV A contains the TITLE
</div>
<div class="B">
DIV B has much more text but I want its text to wrap to the width of div.A (no cut of words, just wrapping)
</div>
</div>
Referencias:
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras