Javascript 调整td中的动态加载内容,无需换行

Javascript 调整td中的动态加载内容,无需换行,javascript,jquery,html,css,Javascript,Jquery,Html,Css,将数据动态加载到表的TD中后,值跳到换行符,而不是增加TD的大小 <table> <tr> <td style="width:250px"> <div> <b>My Value is :</b> <span class="ass">0,00</span> </div> <i style="color:grey" class="fa fa-refre

将数据动态加载到表的TD中后,值跳到换行符,而不是增加TD的大小

<table>
  <tr>
  <td style="width:250px">
  <div>
    <b>My Value is :</b>
    <span class="ass">0,00</span>
  </div>
  <i style="color:grey" class="fa fa-refresh"><span class="mo">Click refresh</span></i>
 </td>
  <td >
 <button value="Submit" class="button success " type="button" name="Management" id="Management">
  Refresh <i class="fa fa-refresh"></i>
</button>
  <button value="Submit" class="button success " type="button" name="Management1" id="Management1">
  Revert Back <i class="fa fa-refresh"></i>
 </button>
 </td>
</tr>
</table>

<span class="daal"></span>

我的价值观是:
0,00
单击刷新
刷新
回复
供参考的小提琴:


HTML/CSS中有没有办法不创建新行,而是扩展TD来调整新文本?

问题是TD的大小是固定的。有两种解决方案:

  • 您可以将td宽度更改为350px,因为该值不适合250px
  • 另一个选项是删除宽度。在这种情况下,td将增大尺寸

    • 问题在于您的td具有固定的大小。有两种解决方案:

      • 您可以将td宽度更改为350px,因为该值不适合250px
      • 另一个选项是删除宽度。在这种情况下,td将增大尺寸
        • 您可以这样做:

           $(document).on('click', '#Management', function(e) {
             $(".ass").html("2132123242342342343213,00");
             $(".daal").html("See the new value jumps to new line. It should come in single line and do not create new line i.e td should expand automatically? Is there any way to do that in CSS or you can suggest other ways?");
             $(".mo").html("Click Revert Back");
          
             var my_b = $('#container_value').find('b').width();
             var my_span = $('#container_value').find('span').width();
             $('#container_value').width(my_b + my_span + 20);
           });
          
           $(document).on('click', '#Management1', function(e) {
           $('#container_value').css('width', 'initial');
             $(".ass").html("0,00");
             $(".daal").html("");
             $(".mo").html("Click Refresh");
           });
          
          请参见此处

          您可以这样做:

           $(document).on('click', '#Management', function(e) {
             $(".ass").html("2132123242342342343213,00");
             $(".daal").html("See the new value jumps to new line. It should come in single line and do not create new line i.e td should expand automatically? Is there any way to do that in CSS or you can suggest other ways?");
             $(".mo").html("Click Revert Back");
          
             var my_b = $('#container_value').find('b').width();
             var my_span = $('#container_value').find('span').width();
             $('#container_value').width(my_b + my_span + 20);
           });
          
           $(document).on('click', '#Management1', function(e) {
           $('#container_value').css('width', 'initial');
             $(".ass").html("0,00");
             $(".daal").html("");
             $(".mo").html("Click Refresh");
           });
          

          请参见此处

          删除宽度对我有效。

          删除宽度对我有效。

          您解决问题了吗?谢谢您的提问。这些变化正在测试中。我将在周一之前提供在其他服务器上的测试结果。即使是我也不能在本地进行测试,我也不觉得在工作小提琴的基础上给出答案:)你解决了你的问题吗?谢谢你的提问。这些变化正在测试中。我将在周一之前提供在其他服务器上的测试结果。即使是我也无法在本地进行测试,我也不觉得在工作小提琴的基础上给出答案:)