How to fix text length in a paragraph?

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

Well what do you want it to do if it goes too much? do you want the text to be smaller? — Sheshank S., Jun 20 '18 at 22:37
@SheshankS.well, I guess I didn't think of it. I think it'd be smarter to lower the font-size. — Desiigner, Jun 20 '18 at 22:41

score 3 · Accepted Answer · answered Jun 20 '18 at 22:55

3

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>

answered Jun 20 '18 at 22:55

Louys Patrice Bessette

33,375
6
36
64

yeah I understood what you mean, but adding this CSS properties to my paragraph doesn't make any changes. Does it happen because my display is not a div? – Desiigner Jun 20 '18 at 23:05
I'm not sure... Are you talking about `
`?
– Louys Patrice Bessette Jun 21 '18 at 21:04
yeah, exactly. Should make it a div? – Desiigner Jun 21 '18 at 21:13
Sure... I hope you did right after that comment. Maybe certainly the `width` of a `p` is different from a `div`. Why that `p` for anyway? – Louys Patrice Bessette Jun 21 '18 at 22:14
HTML and CSS are *very close* when about tweeky display usage. Look for a script when user input is involved.... And you can narrow it real tight based on UI events. ;) – Louys Patrice Bessette Jun 21 '18 at 22:17

How to fix text length in a paragraph?

1 Answers1