我正在尝试制作带有文本的响应按钮，但我无法仅使用 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)来修复它。您可以添加一些填充来代替第二个维度，以使按钮看起来不错:
.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，但您必须根据文本长度手动设置。 Here is an example .它工作得很好，但如果文本太长，它会溢出，所以你必须将 calc(0.9vw + 0.9vh) 更改为较小的值，如 calc(0.5vw + 0.5vh)。 Second example .
关于html - 有没有办法只使用 css 或 html 使文本填充按钮大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53897383/