Reactjs - Automatically Resize and hide tags, in a Post card, based on the available space

AlenScaria
May 22, 2024
194 views
0 votes
2 Answers

As shown in the Image, truncate happens for all the Category tag component. I want to ensure that only the last few tags will get truncate and if it get truncated to really small tags for instance C… then I don’t have to show that tag in the card.

<span
      className=
        'cursor-pointer rounded-3xl px-3 py-1 text-xs font-medium text-light-primary/80 dark:text-dark-primary/80 overflow-hidden whitespace-nowrap truncate'
    >
      {category}
</span>

Can somebody tell me how I can implment this idea ?

I am actually not able to come with an idea on how to implement it.

Answers

- darrenwu
- May 22, 2024 at 8:50 pm
- 0 votes
0
One thing that may work is limiting the number of tags that the post card is able to display (to maybe 3-5), and optionally hiding the rest of the tags using a (…) tag. This should allow the first few tags that do show up to have more room for text and therefore have less characters truncated.

Not sure if this answers your question entirely but I hope it helps!

Login or Signup to reply.

To start dynamically truncating from right to left you can do the following

const TagList = ({ categories }) => {
  const [visibleCategories, setVisibleCategories] = useState(categories);
  const containerRef = useRef(null);

  useEffect(() => {
    const adjustTags = () => {
      if (containerRef.current) {
        const tags = Array.from(containerRef.current.children);
        const containerWidth = containerRef.current.offsetWidth;
        //total width of all tags
        let totalWidth = tags.reduce((sum, tag) => sum + tag.scrollWidth, 0);

        for (let i = tags.length - 1; i >= 0; i--) {
          if (totalWidth <= containerWidth) break;
          const tag = tags[i];
          const textWidth = tag.scrollWidth;
          const tagWidth = tag.offsetWidth;
          if (textWidth > tagWidth) {
            const charsToRemove = Math.ceil(
              (totalWidth - containerWidth) / tags.length
            );
            tag.textContent = tag.textContent.slice(0, -charsToRemove) + "...";
          }
          totalWidth -= textWidth - tag.scrollWidth;
        }

        // Filter out tags that are reduced to ...
        setVisibleCategories(
          categories.filter(
            (category, index) => tags[index].textContent.length > 3
          )
        );
      }
    };

    window.addEventListener("resize", adjustTags);
    adjustTags(); // Initial call

    return () => {
      window.removeEventListener("resize", adjustTags);
    };
  }, [categories]);

  return (
    <div className="tag-container" ref={containerRef}>
      {visibleCategories.map((category, index) => (
        <span key={index} className="tag">
          {category}
        </span>
      ))}
    </div>
  );
};

I also added in a check to remove any of the tags that are showing just … after elipssis you can adjust that as you like

here’s the css

.tag-container {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
}

.tag {
  flex-shrink: 1;
  min-width: 0;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.8); /* Modify as per theme */
  background-color: #f0f0f0; /* Example background color */
  border-radius: 9999px; /* Fully rounded */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

Reactjs – Automatically Resize and hide tags, in a Post card, based on the available space

Answers