In my web application project, I have created multiple choice questions where each answer is displayed within a single button:
<Button
fullWidth={true}
variant="contained"
onClick={(answer) => this.handleAnswer(this.state.answers[0].text)}
>
{this.state.answers[0].text}
</Button>
When clicked, the user can see if they have selected the correct answer. The issue arises when some answers are too long for the button's width, causing the text to break into multiple lines and increase the button's height.
https://i.stack.imgur.com/a3TWT.png
I am looking for a solution to automatically resize the text inside the Button in order to prevent it from breaking down and accommodate longer answer content effectively.