You have to add one more CSS attribute **white-space: nowrap**, you can check the link here to see the result of this property. http://css-tricks.com/almanac/properties/w/whitespace/

The reason why we need this is because we have to handle two different filenames like : 
**12341234123412341234123412341234** and
**1234 1234 1234 1234 1234 1234 1234 1234**

Without **white-space:nowrap;** property, the second filename would not get truncated with ellipsis in your patch.

And also, I think this style's specificity is too high that only #sound panel can get influenced by this style and the same problem may occur again in the future in different panels. So, I suggest to use the following rules.

```css
section li button,
section li a[role="button"],
section li .button {
  overflow: hidden;
  white-space: nowrap;
}
```

What do you think :) ?