動態輸入框中的字符數

Question

我有一個奇怪的數學問題。我正在開發一個使用HTML/CSS/JS的混合移動應用程序，它將支持多種設備。因爲這個原因，我沒有指定輸入框的寬度。

現在我需要截斷輸入框中的文本，但由於未指定寬度，我無法將文本字段的長度與硬編碼值進行比較。我可以得到輸入框的長度（以像素爲單位），我使用的字體大小是固定的（10 px） 有沒有一種方法可以計算Ypx輸入框中Xpx可以容納多少14px字體大小的字符？

Answer 1

我在過去實現這一點的方式可能效率不高，但它的確有訣竅（只是）。

這裏的關鍵是克隆您的文本，並開始對其進行修改。你可以用javascript做這個克隆。將它放在頁面上的一個不可見的div中，然後將文本分解爲單個字符塊。然後可以將這些字符中的每一個都包裹在一個範圍內。

下一步是確保你知道你的輸入框的寬度，並開始從前面開始累加跨度的寬度。這應該只是讓您的自定義「屏幕外」div中的所有span元素遍歷它們的情況。

一旦你點擊幻數寬度數字（或超過它），你知道你的單詞中的字符數量，你可以在框中。

當然，您所描述的內容有一個小小的怪癖，那就是您可能還需要計算出可以放入框中的文本的「行數」，並修改「總寬度「相應地（如果你有1行100px寬，你的最大寬度將是100px，但如果它是3行深，最大寬度將是300px）。

正如我所說，雖然這可能不是有效的處理器使用...但它是一種解決方案，它不需要您的字體是一定的大小或類型。