CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Desiigner
Desiigner

Reputation: 2316

How to fix text length in a paragraph?

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:

sccreen1

But when I enter more than like 12 buttons this happens:

screen2

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

Upvotes: 2

Views: 1090

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

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>

Upvotes: 3

Related Questions