2

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.

enter image description here

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

tbzk
  • 57
  • 1
  • 10
  • How would you like to handle this? Would you like to truncate the text, or resize smaller buttons so they're the same size as larger ones? – Alexander van Oostenrijk Dec 28 '19 at 12:12
  • Buttons should be fixed size like in the example "Insects", "Formation..." and "Behavio...." and the font-size of the button with unexpected long content like "The Origin...." should be automatically decrease that complete text fit in the button without line break. – tbzk Dec 28 '19 at 12:15
  • Does this answer your question? [resize font to fit in a div (on one line)](https://stackoverflow.com/questions/3401136/resize-font-to-fit-in-a-div-on-one-line) – Alexander van Oostenrijk Dec 28 '19 at 12:19

1 Answers1

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;

.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>
Ivan Karaman
  • 1,224
  • 1
  • 7
  • 11