antd 按钮换行文字

Question

使用 antd 包（v3），我想要一个具有固定宽度的按钮，在需要时环绕其文本和换行符，以便文本适合按钮内部，并且边框正确显示在文本周围。

这是我目前尝试过的：Codepen。我注意到使用空白：正常适用于 antd，但不适用于 antd

const {  Button  } = antd;

ReactDOM.render(
  <>
  <div style={{width:"100px"}}>
    <Button block type="primary" ghost style={{whiteSpace: "normal"}}>Wrap around text</Button>
  </div>
  <button style={{width: '100px', whiteSpace: 'normal'}} type='primary'>Wrap around text</button>
  </>,
  mountNode,
);

Answer 1

类“ant-btn”具有固定高度属性，您应该需要通过自动覆盖它并且它可以工作。

<Button block type="primary" ghost style={{whiteSpace: "normal",height:'auto',marginBottom:'10px'}}>Wrap around text</Button>

Answer 2

我的变体：

<Button className="multi-line"...

用我的CSS：

.ant-btn.multi-line {
  display: block;
  height: auto;
}