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

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

我的计算器：

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

我添加数字的方式如下所示：

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

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

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

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

HTML:

---

正如我在评论中读到的，你有几件事要考虑

但这里有一个可能会引起兴趣的建议：CSS和

$（“#测试”）。在（“键控”，函数（）上{
$（“#display”）.text（$（this.val（））；
});
#显示{
/*就为了这个演示*/
高度：1米；
宽度：8em；
边框：1px实心橙色；
显示：内联块；
边缘顶部：0.4em；
/*暗示*/
方向：rtl；
溢出：隐藏；
文本溢出：省略号；
}

输入

结果：
那么，如果过多，您希望它做什么？你想让文本变小吗？你可以添加你的HTML/CSS，添加一个片段，thanks@SheshankS. 我想把钮扣扣扣好blocked@Desiigner如果结果太多怎么办？@SheshankS.嗯，我想我没有想到。我认为降低字体会更明智。是的，我理解你的意思，但将CSS属性添加到我的段落不会有任何改变。这是因为我的显示器不是div吗？我不确定。。。你说的是
？是的，没错。应该是一个div吗？当然。。。我希望你在那次评论之后就这么做了。也许
p
的
width
肯定与
div
不同。不管怎么说，为什么要使用
p
呢？当使用tweeky显示时，HTML和CSS非常接近。在涉及用户输入时查找脚本。。。。你可以根据用户界面事件来缩小范围
<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>

    .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;
}