找到多少字母適合

我有一個div與一些標準的寬度/高度。我應該知道什麼樣的CSS參數，計算有多少字母的div適合沒有溢出？我以爲有以下parametrs是neccessery ..找到多少字母適合

字體大小
文本indext
字母間距
的line-height

那我該怎麼計算div適合的字母的最大數量？

來源

2011-12-15 Chris P

除非您使用固定寬度的字體，否則它取決於使用哪些字母。 – 2011-12-15 19:23:04

好的，我用隨機文本填充div，看看有多少個字母.. 這是伎倆不工作到我的朋友的MAC電腦.. MAC中的文本溢出.. 我嘗試使用em而不是px .. So so em .. 任何幫助？ – 2011-12-15 19:28:17

選中此項。並使用Javascript：http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript – 2011-12-15 19:38:59

首先，讓我們假設你有上的div固定的CSS ：

width 
height 
line-height 
font-size 
font-family 
etc.

我會寫一些JavaScript來填補這個div很多次不同的文本（也許拉的形式實際文章），並在不同的瀏覽器中這樣做。每次計算填充的最大字符數，但不要溢出div。然後你需要發送的數字字符的上限始終填滿div。將滑塊中的每篇文章截斷爲該數字。如果你想確保溢出，然後使用隱藏或省略或其他什麼，你可以添加10個字符。

來源

2011-12-15 20:14:00

您可以在已經在屏幕上繪製的對象上使用getClientRects（），但我假設您想在渲染前計算它，是的？

編輯：哦，我只是注意到，你說你不能使用Javascript。對不起，我以爲你的意思是用Javascript。這改變了問題。
服務器端，你不會知道哪種字體，瀏覽器將使用，它是否會每個字符的寬度，四捨五入到整個像素與否等

來源

2011-12-15 19:27:07

可以將多少個字符放入div非常難以衡量，因爲不同的瀏覽器具有不同的呈現方法，不同的osses甚至圖形適配器可能會使抗鋸齒略有不同。另一個可能起作用的因素是每英寸的像素數，輸出顯示可以顯示。除此之外，字體本身和文本起着一定的作用，因爲你通常不會處理固定的字體。所以你需要了解很多關於使用硬件，軟件和深入字體參數的信息，這些信息從JavaScript範圍內超出了範圍。

好歹有可能是一個辦法......

根據你想知道你可以使用固定的寬度和高度與scrollLeft和scrollTop的，屬性的隱藏標籤，以找出是否文本超過什麼標籤尺寸。這可以通過將scrollLeft和/或scrollTop-Properties設置爲非常高的值（例如99999）來實現，然後用瀏覽器將其替換爲實際值。這些值爲0或大於0.如果它們大於0，則該值表示像素數量，文本將溢出。

重要的是，隱藏字段，它必須被添加到文檔節點樹（與使用appendChild）

您可以創建一個循環（或文本）填寫字符到你的隱藏提起這正好有源標籤/字段具有相同的屬性（使用cloneNode（true））。在循環中，您將檢查scrollLeft/scrollTop是否溢出。如果它溢出，您將擁有最大文本，標籤可以顯示。爲了加快速度，您可能需要將隱藏標記移出瀏覽器視圖（例如left：10000px;）。

測量之後，您可以從節點樹中刪除隱藏的標記。注意廣泛使用 - 實現可能相對較快 - 但如果您想在前端情況下在客戶端執行數十次檢查，則用戶體驗可能會迅速下降，具體取決於客戶端上的瀏覽器類型，處理器速度和系統負載側。

來源

2012-01-31 10:40:20

找到多少字母適合

回答

相關問題