Text wrapping on buttons and menus

[treeder]

When a button or menu item has text with a space in it, it will default wrap like this:

If something else is a bit wider to make the menu wider, it won't.

Of I can add   instead of space:

Is this expected behavior? I'd kind of expect it to never wrap (unless I explicitly wanted it to).

[asyncliz]

This is a bug I'm currently fixing! 😅

By default the button should truncate the label with ellipsis (...). Once I'm finished, folks will be able to make button labels wrap by adding text-wrap: wrap to the button in CSS.

[tve]

has this fix been released?

[asyncliz]

We're planning a release this week, but you can try it now with npm install @material/web@nightly

[treeder]

Seems this still isn't fixed in the latest release.

[asyncliz]

@treeder it's working for me: https://jsbin.com/dujuguyubi/edit?html,output

Do you have a repro?

[treeder]

@asyncliz yes, just make any button or menu that has a space in it, eg:

<md-menu id="user-menu" 
                  anchor="anchorbutton"
                  ?open=${this.open}
                  @closed=${() => (this.open = false)}
                  >
                  <md-menu-item href="/orders">
                    <div slot="headline">Orders</div>
                    <md-icon class="startIcon" slot="start">orders</md-icon>
                  </md-menu-item>

                    <md-menu-item id="goto-orgs" href="/orgs">
                        <div slot="headline">My Stores</div>
                        <md-icon class="startIcon" slot="start">storefront</md-icon>
                    </md-menu-item>
                    <md-menu-item id="goto-signout" @click=${this.signOut}>
                        <div slot="headline">Sign out</div>
                        <md-icon class="startIcon" slot="start">logout</md-icon>
                    </md-menu-item> 
                </md-menu>

[datvm]

Not sure if this is the same but I noticed <md-*-button> are very prone to this in a horizontal flex box and I usually have to add flex-shrink: 0 to them to prevent them wrapping.

[asyncliz]

That should mostly be fixed now at head. Last part to this is getting the button's height to automatically grow when it wraps.

[datvm]

That's awesome! I thought the button height must be fixed due to the specs/guideline (and their CSS is fixed at 40px I think) so I had to try to keep the texts very short for mobile UIs. If they can grow that's great news!

[asyncliz]

By default they'll be single line truncated, and design still heaaavily discourages multi-line buttons, so it's an opt-in.

Buuut nature of the web, screen sizes, and localization means its a feature many folks need.