如何使文本响应其容器？

Question

我有一个输入，用户可以在其中输入一个数字，我有一个固定宽度的 div，它输出 用户输入的值，所以我正在寻找一种方法来使字体大小在消耗容器宽度时变小。这可能吗 ？如果没有，还有其他想法可以处理这种情况

Answer 1

您可以使用 CSS 来实现。您可以以 vw 或像素为单位给出 font-size 值。例如：

p {
  font-size:2vw;
}

或

p {
  height:200px;
  width:200px;
}

或者干脆使用媒体查询。

Answer 2

我想你可以这样做：

var x = //Test the amount of numbers the container has room for and make this x
if (numberInContainer.length > x) {
container.style.font-size = container.style.font-size - 1;
}

或者您可以将其每增加一个数字缩小 1 个字体大小：

var x = //Test the amount of numbers the container has room for and make this x

if (numberInContainer.length > x) {

var extraNumbers = numberInContainer.length - x;
container.style.font-size = container.style.font-size - extraNumbers;

}