break-word to next line td in html table jquery

Question

I have a table with fixed count of td and tr. Rows and cols have fixed width and height. Every td has input type="text" inside. How can I move to next tr the text, which does not fit in td length?

Example table:

<html>
  <body>
    <table style="width:100px">
      <tr style="height:12px">
        <td style="width=50px"><input type="text" style="width:100%" value="12 34 56 44"></td>
        <td style="width=50px"><input type="text" style="width:100%" value="786 5"></td>
      </tr>
      <tr>
        <td style="width=50px"><input type="text" style="width:100%" value=""></td>
        <td style="width=50px"><input type="text" style="width:100%" value=""></td>
      </tr>
    </table>
  </body>
</html>

There are values of top-left input dont' fit in the length of the top-left td.

How can I penetrate values from top-left input to the next cell input below, which not fit in length of the top-left td using jquery ?

Here possible result:

<html>
  <body>
    <table style="width:100px">
      <tr style="height:12px">
        <td style="width=50px"><input type="text" style="width:100%" value="12 34"></td>
        <td style="width=50px"><input type="text" style="width:100%" value="786 5"></td>
      </tr>
      <tr>
        <td style="width=50px"><input type="text" style="width:100%" value="56 44"></td>
        <td style="width=50px"><input type="text" style="width:100%" value=""></td>
      </tr>
    </table>
  </body>
</html>

May be helpful:- https://stackoverflow.com/questions/8100770/auto-scaling-inputtype-text-to-width-of-value — Alive to die - Anant, Jun 26 '19 at 04:46
Thanks, but I can't resize the table, tr, td and inputs width/height — Ivan Ivanov, Jun 26 '19 at 04:56
I guess Alive to Die did link that particular post, because it shows you how to get / limit the length of the content of the input element. It is not a direct answer to your question, apply it for your purposes. — Teemu, Jun 26 '19 at 04:59

alireza yazdandoost · Accepted Answer · 2019-06-26T05:59:26.907

you can use scrollWidth to check if the text has overflown

here is the code snippet. just notice that I added two Ids to two inputs just for simplicity, you can remove them and change jquery code easily if you want.

while($('#in')[0].scrollWidth > $('#in').innerWidth()){
  var inputText = $('#in').val();
  var last = inputText.substr(inputText.length - 1);
  $('#in').val(inputText.slice(0,-1));
  $('#out').val($('#out').val() +''+ last);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<html>
  <body>
    <table style="width:100px">
      <tr style="height:12px">
        <td style="width=50px"><input type="text" id="in" style="width:100%" value="12 34 56 44"></td>
        <td style="width=50px"><input type="text" style="width:100%" value="786 5"></td>
      </tr>
      <tr>
        <td style="width=50px"><input type="text" id="out" style="width:100%" value=""></td>
        <td style="width=50px"><input type="text" style="width:100%" value=""></td>
      </tr>
    </table>
  </body>
</html>

break-word to next line td in html table jquery

1 Answers1