2016-01-06 50 views
0

我創建了一個基於服務器端數據動態加載的工具提示。它一直運作良好,直到我得到更大的SKU。現在有溢出。動態擴展動態加載的DIV的寬度

我正在嘗試使用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()); 

什麼是做到這一點的正確方法是什麼?

回答

0

background規則中刪除no-repeat允許寬度調整爲不同長度的文本。

Revised Fiddle

+0

關於這個網站,你覺得有用的答案,[考慮的給予好評](http://stackoverflow.com/help/someone-answers)。沒有義務。只是提高質量內容的一種方式。 –