I can confirm that text-overflow: ellipsis behaves kind of weird and unpredictable.
It works in some cases, but not in all. Using it inside the sp-action-button did weird things, for example it sometimes would only show the ... after I mouseover the button. Before the mouseover, the fontSize just got a bit smaller kind of.
Speaking of fontSize, making the text slightly larger also worked to show the ..., but of course that’s not always what you want visually.
Not sure what is happening to the gap property. When I copy pasted your code from jsfiddle to a panel, it worked fine. Only changing the button to an sp-action-button broke the gap-feature.
As you said, margins are a workaround and I don’t see any problems with that. You can get the exact same result, if you simply add a negative margin to the parent container.
Media queries should be working fine as long as you only have one panel. For multiple panels, I’ve described a workaround here.