Auto resize font-size in react material-ui Button for unexpected long content?

Question

I've created a web application project with multiple choice questions. Every answer is loaded in a single button:

<Button 
    fullWidth={true}
    variant="contained"
    onClick={(answer) => this.handleAnswer(this.state.answers[0].text)}
>
    {this.state.answers[0].text}
</Button>

On clicked, the answer would be solved and the user sees if he's right. Everything works fine, but some answers are too long for the button width. What happens is, that the Button breaks down to a news line and have now a height of 2 lines.

I want to auto resize the text inside a Button to prevent breaking down and handling unexpected long answer content secure.

Answer 1

You can try something like this, it's a CSS text-overflow: ellipsis; but you should use it with overflow: hidden; white-space: nowrap; overflow: hidden; white-space: nowrap;

 .btn { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-radius: 8px; width: 150px; background-color: #eee; font-size: 24px; font-family: Helvetica, sans-serif; padding: 0.5em 1em; margin-bottom: 1em; text-align: center; }

 <div class="btn">test text</div> <div class="btn">test text</div> <div class="btn">test text</div> <div class="btn">test text test text test text test text test text test text</div>