Как исправить длину текста в абзаце?

Я пытаюсь создать простой калькулятор на 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;
}