Question

我正在尝试使响应按钮上带有文本，但我无法仅使用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 文本将从按钮

消失

Answer 1

如果设置按钮的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的字体大小，但是必须根据文本长度手动设置。 Here is an example。效果很好，但是如果文本太长会溢出，因此您必须将calc(0.9vw + 0.9vh)更改为较小的值，例如calc(0.5vw + 0.5vh)。 Second example。

有没有办法使文本仅使用css或html填充按钮大小？

1 个答案: