标签上带有省略号的按钮，大小由父级决定

Question

Fluent UI PrimaryButton 呈现 <button /> 元素。

这是一个“替换”元素，似乎无法通过样式更改：

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

我想要一个被父级布局“压扁”的按钮，并且不会根据其内容更改其大小。此外，如果文本不适合（而不是换行），它的末尾会有省略号。

这可能吗？

谢谢，

丹科

Answer 1

按钮width基于其内容或父元素。需要修改一些样式才能实现ellipsis内容：

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

Codepen 正在工作 example。

有用的链接：

MDN Text Overflow

Fluent UI Styling Guide

标签上带有省略号的按钮，大小由父级决定

Button with ellipsis on a label, sized by parent

fluentui-react