如何使文本響應其容器？

Question

我有一個用戶可以輸入數字的輸入，我有一個固定寬度的 div，它輸出用戶輸入的值，所以我正在尋找一種方法，使字體大小在消耗容器寬度時變小。 這可能嗎 ？ 如果沒有，還有其他想法可以處理這種情況

Answer 1

你可以用 CSS 做到這一點。 您可以以 vw 或像素為單位給出字體大小值。 例如：

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;

}