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

Question

enter image description here按钮内的文本在按钮外延伸。无论如何，我可以根据按钮/屏幕大小来缩放文本吗？我已经尝试过自动搜索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

使用px，font-size或em之类的相对缩放字体大小代替rem使用绝对缩放单位（vw）。

Answer 2

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