skip to Main Content

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.

2

Answers


  1. 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.
  2. 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;
    }
    

    here’s a image where i ran it with random array
    array of apple text

    if i change the size of the filter > 2 then it will look like this
    enter image description here

    Sorry i couldnt use tailwindcss, but it should be easily convertible

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search