Alternative to `overflow: hidden` which does not clip mid-character

Question

I'm using the overflow: hidden property to limit the numbers shown in my calculator display. However, overflow: hidden clips the characters mid-character, which I want to avoid.

Mozilla suggests to use text-overflow: '';, which isn't very browser-compatible. Do you have any other suggestions as to how to limit the number of characters and clip between characters instead of mid-character. (I don't want to see half a number on my display)

JavaScript solutions are encouraged.

Here is my current solution. It works only if I enter numbers, not when I enter operators.

  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>

It's `overflow: hidden` by the way. – Keno Aug 14 '18 at 16:38 — Keno, Aug 14 '18 at 16:38
Do you have a code snippet to share? – Keno Aug 14 '18 at 16:40 — Keno, Aug 14 '18 at 16:40
@KenoClayton Just added it. Thanks for the suggestions. – Benisburgers Aug 14 '18 at 19:39 — Benisburgers, Aug 14 '18 at 19:39

u-ways · Answer 1 · 2018-08-14T17:43:12.893

You can use a rounding algorithm and exponential notation to display very big numbers:

The function to display the result:

/**
 * Use the rounding algorithm to prevent overflow from float numbers.
 * If the number is too big (>= 1e+8), return a string representing  
 * the Number object in exponential notation.
 */
function resultDisplay(number) {
  number = roundNumber(number, 3);
  return (number >= 1e+8) ? number.toExponential(3) : number;
}

The rounding algorithm used: [1]

/**
 * A rounding algorithm to handle JavaScript's rounding errors.
 * @param  {Number}  num    the number to round
 * @param  {Number}  scale  how many decimal places to keep
 */
function roundNumber(num, scale) {
  var number = Math.round(num * Math.pow(10, scale)) / Math.pow(10, scale);
  if(num - number > 0) {
    return (number + Math.floor(
      2 * Math.round(
        (num - number) * Math.pow(10, (scale + 1))
      ) / 10
    ) / Math.pow(10, scale));
  } else {
    return number;
  }
}

[1] Algorithm based on my understanding to Kunin's answer: Round at most 2 decimal places.

Also have a read through: [Is floating point math broken?](https://stackoverflow.com/q/588004/5037430) Found it helpful when I was building a similar project. — u-ways, Aug 14 '18 at 17:48
I appreciate this solution. However, I am not looking to round the answer, but simply to show the characters which are visible within the display. — Benisburgers, Aug 14 '18 at 19:40

score 1 · Answer 2 · answered Aug 14 '18 at 19:14

1

I understand you prefer JavaScript solutions, but there's a nicer way to do this with CSS that also preserves the actual number for further calculations. Since you didn't provide a code snippet, I can only assume that your calculator reads on a single line.

Here's the fix, assuming the class the number displays on is .number:

.number {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

What this will do is truncate the number with a ... at the end, so if the number is too large it will look something like this:

123.486593845674...

This is compatible with all modern browsers (IE11 and higher).

answered Aug 14 '18 at 19:14

EmilyH

90
1
9

Thank you. Is there a way to the the following without using ellipsis? – Benisburgers Aug 14 '18 at 19:40
1

Not that I'm aware of. IIRC only Firefox supports strings for the text-overflow property, so I don't suggest using that. – EmilyH Aug 14 '18 at 20:25
@DavyH [Yes that's correct](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow) – Keno Aug 15 '18 at 01:01

Alternative to `overflow: hidden` which does not clip mid-character

2 Answers2