We have screen in our application which displays all files uploaded. Each file is able to be assigned tags (as many as needed) which can help with filter and search. Tagging is assigned via the overflow menu or within the document view.

Currently, file list table has a column for tags, but not entirely sure what to do with:

  1. Tag overflow
  2. Column size vs truncation. We do have multiple breakpoints and tags will likely not render on smaller screens as we opted for more of a card based approach vs a table.

My current thought for point #1 was to have the tags side by side (as many as can fit) and then include a +(number) overflow. Hovering on the count would render a list of all assigned tags.

My thought for point 2 was to only truncate the first tag. If the next tag in the array doesn't fit, then it goes in the overflow. Feedback from our dev team is that there could be a lot of math involved and this could get very complicated to build. They were assuming we could show a fixed number of tags in the column and truncate all tags needed, then overflow the rest.

Am I on the right track? Any suggestions?

See attached enter image description here

  • We worked for 45 minutes on the problem Live yesterday here: youtu.be/N6H8URKxydw ... we will post the answer soon. Oct 12, 2022 at 14:29
  • Oh wow! Thank you so much for the feedback. To answer a few questions in the video... - Feedback from our customers that there may be up to 5 tags per document. Our assumption is users will have their own way of organization - Doc number is important for this industry we are in so it needs to be shown. - There is a search field above the table. Users can search by document name, document number, or tags. - There is a filter button above the table, which opens a dialog. Users can select which data points to filter on (tags being one of them) - Sorting on the table is needed
    – MPetro19
    Oct 13, 2022 at 17:27

1 Answer 1


I like the Tag Overflow Idea better. Allows user to view all the values merely on a hover if there are more of it.

Regarding displaying fixed number of tags: I don't see any downside with this approach - and users will get right away if there are lesser number of tags that you guys decide to fit in. For making it work effectively, you can consider asking users to provide primary tags and secondary tags. If you think, 3 is good number that you may fit in - then allow user to provide upto 3 values for primary - and as many as they want in secondary. This way - you would display 3 values which users think are primary tag info for a document.

I would recommend not truncating the any tag value. And fitting more - would clutter the table and won't serve any purpose - assuming users don't always get what truncated word could be - that being said - you will end up forcing users to look at each word(on hover) as opposed to giving them a glimpse of primary tags.

Hope that helps!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.