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

Question

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

我正在尝试使用 CSS 或 JS 动态更改宽度以消除溢出，如 this fiddle 所示。

我的 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());

正确的做法是什么？

Answer 1

从 background 规则中移除 no-repeat 允许宽度调整以适应不同长度的文本。

Revised Fiddle