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

Question

我正在尝试使用JS创建一个简单的计算器。 我正在使用段落标签作为显示，但问题是文本可能会超出行。

我的计算器：

但是当我输入超过12个按钮时，会发生这种情况：

我添加数字的方式如下：

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

我试图将所有按钮放入一个循环中，以检查段落标记的长度，如果长度超过12，则：

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

但是我没有工作。我该怎么办？

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

正如我在评论中所读，您需要考虑几件事。

但这是一个有趣的建议：CSS direction:rtl和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>