溢出的替代方法：隐藏不起作用（计算器显示）：Javascript

Question

我使用了一个叫做scaleFont（）的函数来确保我的计算器显示的字符不会超过其容纳的字符数。当然，我本可以使用“溢出：隐藏”来实现该目标，但是这导致最后一个字符被裁剪成中间字符，这是我想避免的。因此，我使用了scaleFont（）来测量显示的宽度，特定字符的宽度，并计算可以显示多少个字符。每当我输入数字或运算符（+-/ *）时，此方法均能正常工作，但按方程式按钮时，此方法将无效。而是，显示屏将显示一个字符太多（在我的情况下是17个字符而不是16个字符）。有人知道为什么吗？

  let digitsArray = [];
  let digitsString = "";
  let displayOutput = "";
  let pressedButtonsArray = [];
  let pressedButtonsString = "";
  let visibleArray = [];
  let visibleText = "";
  let result = "";
  let displayTextWidth;
  let numberOfCharacters;
  let pixelsPerCharacter;
  let numberOfVisibleCharacters;
  let outerDivWidth;

  window.onload = function() {
    outerDivWidth = document.getElementById("outerDiv").offsetWidth;
  };

  window.onresize = function() {
    outerDivWidth = document.getElementById("outerDiv").offsetWidth;
  };


    document.onkeypress = function(event) {
    let buttonValue = event.which || event.keyCode;
    let buttonCharacter = String.fromCharCode(buttonValue);
    if (/[0123456789]/.test(buttonCharacter)) {
      clickNumberButton(buttonCharacter)
    }
    if (buttonCharacter == "+") {
      clickOperationButton('+','+');
    }
    if (buttonCharacter == "-") {
      clickOperationButton('-','-');
    }
    if (buttonCharacter == "*") {
      clickOperationButton('*','×')
    }
    if (buttonCharacter == "/") {
      clickOperationButton('/','÷');
    };
    if (buttonCharacter == "=") {
      equate();
    }
  };

  function show() {

  }


  function scaleFont() {

    // Put in here, so that it's executed everytime a button is pressed //
    console.log("offsetwidth: " + document.getElementById("displayText").offsetWidth)
    displayTextWidth = document.getElementById("displayText").offsetWidth;
    console.log("displayTextWidth: " + displayTextWidth);
    numberOfCharacters = visibleText.length;
    console.log("numberOfCharacters: " + numberOfCharacters);
    pixelsPerCharacter = displayTextWidth/numberOfCharacters;
    console.log("pixelsPerCharacter: " + pixelsPerCharacter);
    numberOfVisibleCharacters = Math.floor(outerDivWidth / pixelsPerCharacter);
    console.log("numberOfVisibleCharacters: " + numberOfVisibleCharacters);
    displayText = visibleText.slice(-numberOfVisibleCharacters)
    document.getElementById("displayText").innerHTML = displayText;
    console.log("offsetwidth: " + document.getElementById("displayText").offsetWidth)
  }


  function clickNumberButton(button) {
    //Equation has happened//
    if (pressedButtonsArray[pressedButtonsArray.length-1] == "=") {
      pressedButtonsArray = [];
      pressedButtonsArray.push(button);
      pressedButtonsString = pressedButtonsArray.join("");

      visibleArray = [];
      visibleArray.push(button);
      visibleText = visibleArray.join("");
      document.getElementById("displayText").innerHTML = visibleText;
    }
    //Equation hasn't happened//
    else {
      pressedButtonsArray.push(button);
      pressedButtonsString = pressedButtonsArray.join("");

      visibleArray.push(button);
      visibleText = visibleArray.join("");
      document.getElementById("displayText").innerHTML = visibleText;
    }
    scaleFont();
    console.log("PBA: " + pressedButtonsArray);
    console.log("VA: " + visibleArray);
    console.log("PBS: " + pressedButtonsString);
    console.log("VT: " + visibleText);
  }

  function clickOperationButton(button, symbol) {
    if (pressedButtonsArray.length > 0 && (/[0123456789=]/.test(pressedButtonsArray[pressedButtonsArray.length-1])) || (button == "-" && pressedButtonsArray[pressedButtonsArray.length-1] !== "-")) {
      if (pressedButtonsArray[pressedButtonsArray.length-1] == "=") {
        pressedButtonsArray = [];
        pressedButtonsArray.push(result, button);
        pressedButtonsString = pressedButtonsArray.join("");

        visibleArray = [];
        visibleArray.push(result, symbol);
        visibleText = visibleArray.join("");
        document.getElementById("displayText").innerHTML = visibleText;
      }
      else {
        pressedButtonsArray.push(button);
        pressedButtonsString = pressedButtonsArray.join("");

        visibleArray.push(symbol);
        visibleText = visibleArray.join("");
        document.getElementById("displayText").innerHTML = visibleText;
      }
    }
    scaleFont();
    console.log("PBA: " + pressedButtonsArray);
    console.log("VA: " + visibleArray);
    console.log("PBS: " + pressedButtonsString);
    console.log("VT: " + visibleText);
  }

  function equate() {
    if (pressedButtonsArray.length > 0 && (/[0123456789]/.test(pressedButtonsArray[pressedButtonsArray.length-1]))) {
      pressedButtonsArray.push("=");
      result = eval(pressedButtonsString);
      pressedButtonsString = result.toString();

      visibleArray.push("=");
      visibleText = result.toString();
      document.getElementById("displayText").innerHTML = visibleText;
    }
    scaleFont();
    console.log("PBA: " + pressedButtonsArray);
    console.log("VA: " + visibleArray);
    console.log("PBS: " + pressedButtonsString);
    console.log("VT: " + visibleText);
  }

  function del() {
    if (pressedButtonsArray[pressedButtonsArray.length-1] == "=") {
      pressedButtonsArray = [];
      pressedButtonsString = "";

      visibleArray = [];
      visibleText = "";
      result = "";
      document.getElementById("displayText").innerHTML = "";
    }
    else {
      pressedButtonsArray.splice(-1,1);
      pressedButtonsString = pressedButtonsArray.join("");

      visibleArray.splice(-1,1)
      visibleText = visibleArray.join("");
      document.getElementById("displayText").innerHTML = visibleText;
    }
    scaleFont();
    console.log("PBA: " + pressedButtonsArray);
    console.log("VA: " + visibleArray);
    console.log("PBS: " + pressedButtonsString);
    console.log("VT: " + visibleText);
  }

  function cancel() {
    pressedButtonsArray = [];
    pressedButtonsString = "";
    visibleArray = [];
    visibleText = "";
    result = "";
    scaleFont();
    document.getElementById("displayText").innerHTML = "";
    console.log("PBA: " + pressedButtonsArray);
    console.log("VA: " + visibleArray);
    console.log("PBS: " + pressedButtonsString);
    console.log("VT: " + visibleText);
  }

.container {
    width: 100%;
    height: 100%;
    margin: auto;
  }

  .wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 16vh;
    font-family: sans-serif;
  }

  .outerDiv {
    font-size: 80px;
    grid-column-start: 1;
    grid-column-end: 13;
    grid-row-start: 1;
    grid-row-end: 2;
    background-color: #DABE4A;
    text-align:right;
    white-space: nowrap;
  }

  .innerDiv {
    float:right;
  }

  .displayText {
    }

  .cancel {
    grid-column-start: 1;
    grid-column-end: 7;
    grid-row-start: 2;
    grid-row-end: 3;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .del {
    grid-column-start: 7;
    grid-column-end: 10;
    grid-row-start: 2;
    grid-row-end: 3;
  }

  .divide {
    grid-column-start: 10;
    grid-column-end: 13;
    grid-row-start: 2;
    grid-row-end: 3;
  }

  .multiply {
    grid-column-start: 10;
    grid-column-end: 13;
    grid-row-start: 3;
    grid-row-end: 4;
  }

  .minus {
    grid-column-start: 10;
    grid-column-end: 13;
    grid-row-start: 4;
    grid-row-end: 5;
  }

  .plus {
    grid-column-start: 10;
    grid-column-end: 13;
    grid-row-start: 5;
    grid-row-end: 7;
  }

  .seven {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
  }

  .eight {
    grid-column-start: 4;
    grid-column-end: 7;
    grid-row-start: 3;
    grid-row-end: 4;
  }

  .nine {
    grid-column-start: 7;
    grid-column-end: 10;
    grid-row-start: 3;
    grid-row-end: 4;
  }

  .four {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 5;
  }

  .five {
    grid-column-start: 4;
    grid-column-end: 7;
    grid-row-start: 4;
    grid-row-end: 5;
  }

  .six {
    grid-column-start: 7;
    grid-column-end: 10;
    grid-row-start: 4;
    grid-row-end: 5;
  }

  .one {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 5;
    grid-row-end: 6;
  }

  .two {
    grid-column-start: 4;
    grid-column-end: 7;
    grid-row-start: 5;
    grid-row-end: 6;
  }

  .three {
    grid-column-start: 7;
    grid-column-end: 10;
    grid-row-start: 5;
    grid-row-end: 6;
  }

  .decimal {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 6;
    grid-row-end: 7;
  }

  .zero {
    grid-column-start: 4;
    grid-column-end: 7;
    grid-row-start: 6;
    grid-row-end: 7;
  }

  .equal {
    grid-column-start: 7;
    grid-column-end: 10;
    grid-row-start: 6;
    grid-row-end: 7;
  }

  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    border: thin black solid;
  }

  .special {
    background-color: #C6CE71;
  }

  .operation {
    background-color: #8CD4B9;
  }

  .number {
    background-color: #153058;
  }

  .module-button {
    background-color: inherit;
    font: inherit;
    border: none;
    width: 100%;
    height: 100%;
  }

  .module-button:focus {outline:0;}

  .module-button:hover {
    filter:brightness(1.5);
  }

  .module-button:active {
    filter:brightness(1);
  }

  @media only screen and (min-width: 768px) {
    .container {
      width: 752px;
      max-height: 100%;
    }
    .wrapper {
      grid-auto-rows: minmax(103px);
    }
  }

<div class="container">
  <div class="wrapper">
    <div class="outerDiv" id="outerDiv">
      <div class="innerDiv" id="innerDiv">
        <span class="displayText" id="displayText">
        </span>
      </div>
    </div>
    <div class="cancel button special"><button class="module-button" onclick="cancel()">CANCEL</button></div>
    <div class="del button special"><button class="module-button" onclick="del()">DEL</button></div>

    <div class="plus button operation"><button class="module-button" onclick="clickOperationButton('+','+')">+</button></div>
    <div class="minus button operation"><button class="module-button" onclick="clickOperationButton('-','-')">-</button></div>
    <div class="multiply button operation"><button class="module-button" onclick="clickOperationButton('*','×')">×</button></div>
    <div class="divide button operation"><button class="module-button" onclick="clickOperationButton('/','÷')">÷</button></div>


    <div class="seven button number"><button class="module-button" onclick="clickNumberButton(7)">7</button></div>
    <div class="eight button number"><button class="module-button" onclick="clickNumberButton(8)">8</button></div>
    <div class="nine button number"><button class="module-button" onclick="clickNumberButton(9)">9</button></div>

    <div class="four button number"><button class="module-button" onclick="clickNumberButton(4)">4</button></div>
    <div class="five button number"><button class="module-button" onclick="clickNumberButton(5)">5</button></div>
    <div class="six button number"><button class="module-button" onclick="clickNumberButton(6)">6</button></div>

    <div class="one button number"><button class="module-button" onclick="clickNumberButton(1)">1</button></div>
    <div class="two button number"><button class="module-button" onclick="clickNumberButton(2)">2</button></div>
    <div class="three button number"><button class="module-button" onclick="clickNumberButton(3)">3</button></div>

    <div class="decimal button number"><button class="module-button" onclick="clickNumberButton('.')">.</button></div>
    <div class="zero button number"><button class="module-button" onclick="clickNumberButton(0)">0</button></div>
    <div class="equal button number"><button class="module-button" onclick="equate()">=</button></div>

  </div>
</div>