Блог

У меня есть компонент «Альбом» (React), который включает обложку альбома, название и дату выпуска. По сути, это компонент, похожий на карточку, который разбит на два раздела: фотография и текст. Компонент альбома отображается для каждого отдельного альбома в дискографии исполнителя.

Обложка альбома имеет одинаковый размер для каждого альбома, но название альбома варьируется по длине от альбома к альбому. При рендеринге десятков компонентов альбома все карточки были созданы разного размера, в зависимости от длины названия альбома. Желая придать одинаковый вид всем рядам альбомов, я добавил «flex», а затем «flex-shrink-0», что заставляет все альбомы оставаться одинакового размера.

Это решило проблему единообразного размера, но создало новую — теперь длинные названия альбомов перетекают в соседние компоненты. Я могу добавить ‘overflow-hidden’ к родительскому div, но то, что я действительно хотел бы сделать, это динамически принудительно уменьшить текст, чтобы он соответствовал единому размеру альбома без переполнения.

Я пытался просмотреть документы Tailwind, чтобы найти решение, но пока ничего не сработало. Я пробовал ‘object-contain’ и ‘break-normal’, не повезло. Я думаю, возможно, что ‘flex-shrink-0’ может не позволять тексту сжиматься — мое намерение при его добавлении состояло в том, чтобы заставить текстовый контейнер div не сжиматься, а не сам текст. Если я удалю ‘flex-shrink-0’, я смогу использовать некоторые из этих решений для динамического сжатия текста, но тогда мои карточки не будут принудительно иметь одинаковый размер, и тогда я вернусь к своей первоначальной проблеме…

Подводя итог моему вопросу: возможно ли для меня иметь карточки одинакового размера с текстом динамического размера внутри них? То есть, могу ли я иметь текст динамического размера внутри div, в котором есть ‘flex-shrink-0’? Предпочтительно в Tailwind?

Вот код для моего компонента Album:

 import React from "react";

export const Album = (props: any) => {
  return (
    <div className="max-w-xs rounded overflow-hidden shadow-lg m-auto transform transition duration-300 hover:scale-110">
      <div className="object-fill">
        <a
          href={props.album.external_urls.spotify}
          target="_blank"
          rel="noreferrer"
        >
          <img alt={"Album Cover"} src={props.album.images[1].url} />
        </a>
      </div>
      <div className="flex">
        <div className="px-6 py-4 flex-shrink-0">
          <div className="font-bold text-purple-500 text-lg mb-2">
            {props.album.name}
          </div>
          <div className="font-bold text-black-500 text-md mb-2">
            {props.album.release_date.replaceAll("-", "/")}
          </div>
        </div>
      </div>
    </div>
  );
};

 

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