Search code examples
htmlcssantd

antd button wrap text

Using the antd package (v3) I would like to have a button with a fixed width that wraps around its text and linebreaks when needed so the text fits inside the button and borders appear around the text correctly.

Here is what I have tried at the moment: Codepen. I noted that using whitespace: normal works with but not with 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,
);
Solution

  • The class "ant-btn" has fixed height property, you should need to override it by auto and it works.

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