如何修复段落中的文本长度？

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

正如我在 cmets 中看到的那样，您有几件事要考虑。

但这里有一个可能感兴趣的建议：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>