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

Question

在此处输入图像描述按钮内部的文本正在按钮外延伸。无论如何，我可以根据按钮/屏幕大小使文本缩放吗？我已经尝试过自动和搜索YouTube和谷歌。还使用了媒体查询。

我已经尝试过自动和搜索YouTube和谷歌。

@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

尝试像这样对按钮使用分词符属性分词：分词;