格式化值標簽以適合而不被切斷

Question

我遇到一個問題，其中我會自動格式化jQuery.Knob實例，並且該實例被錯誤地切斷。 最終看起來像這樣：

等等....

該滑塊只是在范圍內上升（ 最大值將在$10,000,000附近，可能還會更多 ），因此您可以理解，顯示值的很大一部分會隨着它的增長而被截斷，這不是我想要的...。

我設法通過使用以下方法重載draw方法來抵消這種情況，但是隨着字體大小的增加，這並不是完全可靠的方法：

$(this.i).css('font-size', '90%').val('$' + parseFloat(this.cv, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());

但是，我想要一種更清潔的方法，而不必將自己的CSS應用於呈現的標簽。

我確實嘗試了以下format ，但是它超載了：

format: function (value) {
    return '$' + parseFloat(value, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,")
},

DEMO

---

^{我正在使用Bootstrap進行任何操作，並且此容器的HTML如下所示：}

<div class='row margin-top-45'>
    <div class='col-lg-4'>
        <input value="50000" class="dial" data-step="5000" data-min="0" data-max="10000000" data-thickness="0.2" data-fgColor="#16A085" data-skin="tron">
    </div>
</div>

Answer 1

這是我決定采用此解決方案時動態更改字體的示例： https : xxxxx.xx嘗試將值從xxxxx.xx為xxxxxx.xx ，您會注意到字體會減少。 從這里，您可以根據必須使用基本數學顯示的位數確定字體值。

代碼本身在下面。 我保留了重載的format功能並添加了change功能：

 jQuery('.dial').knob({ format: function(e) { return '$' + parseFloat(e, 10).toFixed(2).replace(/(\\d)(?=(\\d{3})+\\.)/g, "$1,") }, change: function(v) { var v = parseInt(v); var valLength = String(v).length; var defaultFontSize = 22; if (valLength > 5) { var defaultFontSize = 22 - ((valLength - 5) * 4); this.i.css({ font: 'bold ' + defaultFontSize + 'px Arial' }); } else { this.i.css({ font: 'bold ' + defaultFontSize + 'px Arial' }); } } });