Динамическое сжатие текста внутри «flex-shrink-0» (TailwindCSS) ⇐ CSS

[Anonymous]

У меня есть компонент «Альбом» (React), который включает обложку альбома, название и дату выпуска. По сути, это компонент, похожий на карточку, разбитый на два блока: фотография и текст. Компонент альбома отображается для каждого отдельного альбома в дискографии исполнителя.
Обложка альбома имеет одинаковый размер для каждого альбома, но длина названия альбома варьируется от альбома к альбому. При рендеринге десятков компонентов альбома все карточки создавались разного размера, в зависимости от длины названия альбома. Желая единообразного вида для всех рядов альбомов, я добавил «flex», а затем «flex-shrink-0», что заставляет все альбомы оставаться одинакового размера.
Это решило проблему. проблема с единым размером, но возникла новая - теперь длинные названия альбомов перетекают в соседние компоненты. Я могу добавить «overflow-hidden» к родительскому элементу div, но мне бы очень хотелось динамически сжимать текст, чтобы он вписывался в единый размер альбома без переполнения.
Я пытался просмотреть документацию Tailwind, чтобы найти решение, но пока ничего не помогло. Я пробовал «содержать объект» и «нарушить нормальность», но безуспешно. Я думаю, что возможно, что «flex-shrink-0» не позволяет тексту сжиматься - при его добавлении я намеревался заставить не сжиматься div текстового контейнера, а не сам текст. Если я удалю «flex-shrink-0», я смогу использовать некоторые из этих решений для динамического сжатия текста, но тогда все мои карты не будут вынуждены иметь одинаковый размер, и тогда я вернусь к своему исходная проблема...
Подводя итог моему вопросу: возможно ли, чтобы у меня были карточки одинакового размера с текстом динамического размера внутри них? То есть, могу ли я иметь текст с динамическим размером внутри div, на котором есть «flex-shrink-0»? Предпочтительно в Tailwind?
Вот код моего компонента «Альбом»:

Код: Выделить всё

import React from "react";

export const Album = (props: any) => {
return (


[url={props.album.external_urls.spotify}
target=]
[img]{props.album.images[1].url} /[/img]
[/url]



{props.album.name}

{props.album.release_date.replaceAll("-", "/")}




);
};

Пример нескольких альбомов, в которых изображена проблема с размером текста

Подробнее здесь: https://stackoverflow.com/questions/651 ... ailwindcss