Button with ellipsis on a label, sized by parent

Question

Fluent UI PrimaryButton renders the <button /> element.

This is a "replaced" element and it seems this cannot be changed with styling:

https://stackoverflow.com/a/27658723/1353203

https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element

I'd like to have a button which is "squashed" by parent's layout and doesn't change its size based on its content. Also, it would have ellipsis at the end if the text doesn't fit (instead of wrapping).

Is this possible?

Thanks,

Danko

Answer 1

Button width is based on its content or parent element. You need to modify some styles to achieve ellipsis content:

<PrimaryButton
  ...
  styles={{
    textContainer: {
      overflow: 'hidden',
    },
    label: {
      overflow: 'hidden',
      whiteSpace: 'nowrap',
      textOverflow: 'ellipsis',
    }
  }}
/>

Codepen working example.

Useful links:

MDN Text Overflow

Fluent UI Styling Guide