How to I apply text-overflow to button text?

[datvm]

I have a button with unknown content and I want to use text-overflow: ellipsis. I managed to keep the button size within desired size but the text still shows up and overflows:

    .button-text {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

Lit Playground

In Devtools, if I add max-width: 100% to its parent (.button__label), it works but I don't know how I can do that without DevTools. Please give me some direction. Thanks.

[CornerSyrup]

It doesn't seems possible, for the width of span.button__label doesn't limited by it's container, and there's no token to customize the overflow or width/max-width.

I've thought of ::part pseudo-selector but MWC can't be customized via part.

my experiment:

[asyncliz]

Can you try with the nightly version? We added this as a feature.

[datvm]

Thanks, it works in the latest version :)

P.s: is there any way to test current Github code with Lit Playground? Currently I have to pull the Github code to the local machine to test it.

[asyncliz]

Not right now I'm afraid, you'd need to set up a manual CDN

// import '@material/web/all.js';
import 'https://esm.run/@material/web@nightly/all.js';