Búsqueda de sitios web

javascript - Hacer que el texto se reduzca dinámicamente dentro de 'flex-shrink-0' (TailwindCSS)

Tengo un componente 'Album' (React) que incluye la portada del álbum, el nombre y la fecha de lanzamiento. Es esencialmente un componente con apariencia de tarjeta que se divide en dos divs: la foto y el texto. El componente del álbum se renderiza para cada álbum diferente en la discografía de un artista.

La portada del álbum tiene el mismo tamaño para cada álbum, pero el nombre del álbum varía en longitud de un álbum a otro. Al renderizar decenas de componentes de álbum, las tarjetas se creaban todas en tamaños diferentes, dependiendo de la longitud del nombre del álbum. Quería un aspecto uniforme para todas las filas de álbumes, así que añadí 'flex' y luego 'flex-shrink-0', lo que obliga a que todos los álbumes mantengan el mismo tamaño.

Eso resolvió el problema del tamaño uniforme, pero creó uno nuevo: ahora los nombres de los álbumes que son largos se desbordan en sus componentes vecinos. Puedo agregar 'overflow-hidden' al div padre, pero lo que realmente me gustaría hacer es forzar dinámicamente que el texto se encoja para que quepa en el tamaño uniforme del álbum sin desbordarse.

He intentado buscar en la documentación de Tailwind para encontrar una solución, pero hasta ahora nada ha funcionado. He probado 'object-contain' y 'break-normal', sin suerte. Creo que es posible que 'flex-shrink-0' no permita que el texto se reduzca; mi intención al agregarlo era forzar que el div que contiene el texto no se reduzca, no el texto en sí. Si elimino 'flex-shrink-0', podría usar algunas de estas soluciones para reducir dinámicamente el texto, pero entonces mis tarjetas no estarían forzadas a tener todas el mismo tamaño, y volvería a mi problema original...

Para resumir mi pregunta: ¿Es posible que tenga tarjetas de tamaño uniforme con texto de tamaño dinámico dentro de ellas? Es decir, ¿puedo tener texto de tamaño dinámico dentro de un div que tenga 'flex-shrink-0'? Preferiblemente en Tailwind?

Aquí está el código de mi componente 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>
  );
};

Ejemplo de varios álbumes que muestran el problema del tamaño del texto

Respuesta #1

¿Qué quieres decir con texto de tamaño dinámico? ¿Incluye el tamaño de la fuente o solo el espaciado entre letras? De cualquier manera, creo que es posible, pero requiere algo de JavaScript.

    function isTextOverflowing(element) {
       return element.scrollWidth > element.clientWidth;
    }

Puedes detectar si el texto se desborda y cambiar dinámicamente el tamaño del texto (text-lg, text-md, text-sm...) hasta que no se desborde. Mientras esto ocurre, aplica visibility:none para evitar que el texto parpadee. Si tus tarjetas tienen un tamaño fijo, probablemente solo necesites revisar la longitud de los caracteres.

Artículos relacionados