动态扩展动态加载的DIV的宽度

Dynamically expanding width of a dynamically loaded DIV

本文关键字：动态 DIV 扩展 加载      更新时间：2023-09-26

我创建了一个工具提示，它是基于服务器端数据动态加载的。它一直运行良好，直到我得到了更大的SKU。现在出现溢出。

我试图使用CSS或JS来动态更改宽度，以消除溢出，如图所示。

我的HTML:

<div class="ext-tooltip 12345-789-1456789-431535" data-sku="12345-789-1456789-431535">
  <div class="tooltip-stock">12345-789-1456789-431535 :: 5</div>
</div>
<div id="invoice-lines">
    <div id="progress-container" class="hide" style="display: none;">
        <div class="progress-bar-container">
            <div id="progress-bar" class="progress-bar-progress" style="width: 100%;"></div>
        </div>
        <div class="example ta_center">Loading...</div>
    </div>
<table cellspacing="0" id="invoice-time" class="invoice-lines spreadsheet" style="display:none"></table>

我的CSS:

.ext-tooltip {
  display: inline-block;
  background: url(//cdn.shopify.com/s/files/1/0059/3992/t/14/assets/oem-icon.png?17543244824127338148) -78px 0 no-repeat;
  font-family: Arial, sans-serif;
  padding: 0 10px 7px 3px;
  margin-left: 3px;
  line-height: 22px;
  overflow: hidden;
  color: black;
  font-weight: normal;
  font-size: 9pt;
}

我的JS:

var $tooltip = $('.ext-tooltip.12345-789-1456789-431535');
$tooltip.innerWidth($('.tooltip-stock', $tooltip).innerWidth());

正确的方法是什么？

从background规则中删除no-repeat可以根据不同的文本长度调整宽度。

修订Fiddle

相关文章：