我正在尝试制作带有文本的响应式按钮，但我无法仅使用 CSS 和 HTML 使文本保持在按钮大小
body {
margin: 0;
}
.button {
float: left;
width: 20vw;
height: 20vh;
text-align: center;
font-size: 6vmin;
font-weight: bold;
}<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='chatstyle.css'>
</head>
<body>
<button class="button">justlongtext</button>
</body>使用此代码，然后尝试调整窗口大小，例如调整为 190px 310px文本将从按钮中消失
如果设置按钮的width和height，当文本大于按钮时，它将溢出。您可以通过仅设置一个维度（仅width或仅height）来修复它。而不是第二个维度，你添加一些填充使按钮看起来不错：
.only-height {
height: 50px;
}
.only-width {
width: 100px;
}<button class="only-height">This is very long text, but it won't overflow because only the height is set.</button>
<br>
<button class="only-width">This is very long text, but it won't overflow because only the width is set.</button>如果你想按按钮的大小调整文本的大小，我建议你使用javascript。但是你也可以在没有javascript的情况下做到这一点。您还可以在字体大小中使用vw和vh，但您必须根据文本长度手动设置它。下面是一个示例。它工作得很好，但如果文本太长，它会溢出，因此您将不得不calc(0.9vw + 0.9vh)更改为较小的值，例如 calc(0.5vw + 0.5vh) .第二个例子。