Shorten list label when too long


This is probably very simple, but I couldn’t figure out a way to do this without breaking the overall page layout.

I’m using a very basic list with badges, as illustrated here. Since I’m loading each item’s label and count (the number inside the badge) via a RESTful API, I need to shorten the label (via an ellipsis) when it would cause a line break and mess up with the item’s layout. Should I use javascript to do the trick somehow? Does a pure CSS solution exist?

Thank you.