Antd按钮如何自动换行文本

Question

使用 antd 包（v3），我想要一个具有固定宽度的按钮，当需要时可以换行以使文本适合按钮内，并且边框正确地出现在文本周围。

目前我尝试了以下方法：Codepen。我注意到，使用 whitespace: normal 可以与 一起使用，但无法与 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,
);

- Konrad

Answer 1

类 "ant-btn" 具有固定的高度属性，您需要通过将其覆盖为自动以使其正常工作。

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

- shahid

---

该死，解决方案总是相当简单，但我永远想不出来！谢谢 Shahid。 - Konrad