Html 是否在“反应材质”ui按钮中自动调整字体大小以显示意外的长内容？

我创建了一个带有多项选择题的web应用程序项目。每个答案都加载在一个按钮中：

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

this.handleAnswer（this.state.answers[0].text）}
>
{this.state.answers[0].text}

单击后，答案将被解决，用户将看到他是否正确。一切正常，但有些答案对于按钮宽度来说太长。发生的情况是，按钮分解为一条新闻行，现在有两行的高度

---

我想自动调整按钮内文本的大小，以防止出现故障并安全处理意外的长答案内容。

您可以尝试类似的方法，这是一种CSS

文本溢出：省略号但您应该将其与
溢出：隐藏一起使用；空白：nowrap


.btn{
溢出：隐藏；
空白：nowrap；
文本溢出：省略号；
边界半径：8px；
宽度：150px；
背景色：#eee；
字体大小：24px；
字体系列：Helvetica，无衬线；
填充物：0.5em 1em；
边缘底部：1米；
文本对齐：居中；
}
测试文本
测试文本
测试文本
测试文本测试文本测试文本测试文本测试文本测试文本测试文本
您希望如何处理此问题？是否要截断文本，或调整较小按钮的大小，使其与较大按钮的大小相同？按钮的大小应固定，如示例“昆虫”、“形成…”和“行为…”中所示，并且按钮的字体大小应具有意外的长内容，如“原点…”应自动减少按钮中的完整文本，且不换行。这是否回答了您的问题？这是隐藏额外的单词，但不调整字体大小。这是解决方案的想法，字体大小调整使您能够进行复杂的计算。更聪明的方式做按钮的行高一样大。调整大小的文本可能无法阅读…我只是添加了溢出：隐藏；空白：nowrap；文本溢出：省略号；“拉赫鲁哈山你说得对，我就在我的例子之前写的。”