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

从no-repeat规则中删除background可以将宽度调整为不同的文字长度。

Revised Fiddle

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

1 个答案: