如何确定段落中的文字长度？

Question

I'm tryin' to create a simple calculator using JS. I'm using a paragraph tag as a display and the problem is that the text can go beyond the line.

My calculator:

But when I enter more than like 12 buttons this happens:

They way I'm adding numbers looks like:

    $('#5').click(function() {
  $("#mainline").text(function(i, oldtext) {
    return oldtext.replace(/^0$/, '') + '5';
  });
});

I tried to put all buttons in a loop that will check the length of the paragraph tag and if it's more than 12 then:

 document.getElementsByTagName("button").disabled = true

But I didn't work. What should I do?

HTML:

<div class='calculator'>
          <div class='lines'><p id="mainline">0</p></div>

          <div id="row1">

            <button id='AC'>AC</button>
            <button id='pm'><sup>+</sup>/<sub>-</sub></button>
            <button>%</button>
            <button id='dvd'>/</button>

          </div>

CSS:

    .calculator {
  display: inline-block;
  position: relative;
  padding-left: 37%;
  padding-top: 7%;
}

button {
  width: 50px;
  height: 40px;
  margin-bottom: 1px;
}

#mainline {
  border: 3px solid #FF9500;
  text-align: right;
}

Answer 1

You have a couple things to think of, as I read in comments.

But here is a suggestion that may be of interest: CSS direction:rtl and text-overflow:ellipsis ...

 $("#test").on("keyup",function(){ $("#display").text($(this).val()); }); 

 #display{ /* Just for this demo */ height:1em; width:8em; border: 1px solid orange; display:inline-block; margin-top:0.4em; /* suggestion */ direction: rtl; overflow:hidden; text-overflow: ellipsis; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Type in! <input id="test"><br> Result: <div id="display"></div>