視覺上的長度是一個字符串？

Question

我很想知道一個字符串出現在屏幕上的時間。我們不使用固定寬度字體，所以：

"Our mother's tummy makes dummy noises." 

比更廣：

"Lilly Leadbetter lives life leisurely." 

有沒有辦法告訴的東西有多長是由字符？我不需要像素完美的準確性，只需足夠長的時間就可以在大致正確的位置進行橢圓。 CSS溢出不會有幫助，因爲在CSS確定了多長時間後，我無法附加橢圓。

Answer 1

通常我會同意fsb，你必須明白，在網絡上你沒有像素完美控制一切。這不是印刷品。選擇一個合理的長度並將其從服務器端切掉，可以避免在一個詞的中間切入，使其看起來更好一點。

如果你堅持一個完美的長度，但請檢查ThreeDots，一個jQuery插件。

Answer 2

這是一個至少有部分解決方案的related question。基本上，技巧是將文本呈現在隱藏的<span>中，然後（使用JavaScript）測量跨度的像素寬度，然後剪掉字符，直到它符合目標寬度。

這裏的a jQuery plugin封裝了這種功能，鏈接從this related question。

Answer 3

除非你使用固定寬度的字體，否則我不認爲有任何簡單的方法可以說明。也許最簡單的方法是呈現候選文本並查看它有多長。

服務器端，這是有點碰運氣，因爲你不知道瀏覽器將如何處理文本。你可以使用GD（或類似的東西）和你最好的猜測瀏覽器將使用什麼樣的字體和大小，但是當你不能相信你的猜測時，它是否值得遇到麻煩？

客戶端在JavaScript（或其他）中，您可以讓瀏覽器呈現文本並查看呈現DOM對象的時間（如喬丹所說）。

一個解決方案雖然心理上可能非常困難，但要明白網頁渲染不是印刷術。你沒有控制權。你盡力，接受侷限，繼續下一個問題。技術上很簡單，但也許很難接受。

Answer 4

您可以使用truncate輔助函數。即使您瞭解視覺長度，也不可能爲所有瀏覽器/瀏覽器窗口大小調整優化它。