I'm currently working on an antd Card and I am trying to figure out how to display the title on two lines if it is too long. For example, instead of showing "This title needs to go to ne...", I would like it to be split into two lines as "This title needs to go to" on the first line and "next line" on the second line. I want to avoid using pixels for width in order to keep it interactive. Below is the code snippet I have written:
<Row gutter={24}>
<Col xs={24} md={10}>
<Card
title={<span>This title name should go to next line if instead of displaying ...</span>}
bodyStyle={{ paddingTop: 5 }}
>
<p>Card description</p>
</Card>
</Col>
</Row>
Is there a way to achieve this using inline size and make it interactive?