如何使按钮内的文本水平缩放到页面？

Question

enter image description here按钮内的文本延伸到按钮外。无论如何，我可以根据 button/screen 大小制作文本比例吗？我已经尝试过自动搜索 youtube 和 google。还使用了媒体查询。

我已经尝试过自动搜索 youtube 和 google。

@media(min-width: 400px) {
    .purplebutton {
        min-width: 350px;
    }
    .buttontext {
        font-size: 16px;

    }
}
@media(min-width: 600px) {
    .purplebutton {
        min-width: 450px;
    }
    .buttontext {
        font-size: 17px;

    }
}

@media(min-width: 800px) {
    .purplebutton {
        min-width: 550px;

    }
    .buttontext {
        font-size: 20px;

    }
}

预期的结果是文本适合按钮并根据字体大小进行调整。

实际结果是文本超出了按钮

Answer 1

不要为 font-size 使用绝对缩放单位 (px)，而是使用相对缩放字体大小，例如 em、rem 或 vw。

Answer 2

尝试像这样对按钮使用分词属性 断字：全部断字；

如何使按钮内的文本水平缩放到页面？

How to make text inside a button scale horizontally to page?

css

scaling

media-queries

reactjs