如何使文字寬度在任何瀏覽器中均等匹配？

是否有某種技巧使字體大小佔用相同數量的寬度，而不管使用哪種瀏覽器？（我使用字體大小的像素，但我不知道這與這個問題有多相關）。如何使文字寬度在任何瀏覽器中均等匹配？

通常，如果我的網站上有一行文字，我只想佔用一行而不是下降到一秒鐘，我必須確保我寫的文本足夠短，以便在所有主要瀏覽器的分配空間內適合一行。舉例來說，我可能會在一個div中編寫一些文本（它也有一個像素的指定寬度），這些文本在firefox，Safari等等上以一行出現，但是當我去檢查ie8時，出於某種原因它顯示出來，它沒有剩餘空間，最後一個字，並把這個字下降到第二行的開頭。我想知道是否有辦法讓文本佔用寬度相同的空間，無論如何。這裏有一些簡單的解決方案，我錯過了嗎？

正如我所說的，我使用像素字體大小，我一直在使用其他測量單位進行研究，但到目前爲止我的理解是，使用諸如em字體大小之類的東西不會真的是這是因爲它們基本上是像素的抽象。即使有一種方法可以用不同的度量單位來實現，但我很想知道是否有解決方案可以讓我保留像素，因爲這只是我的首選度量單位。

來源

2012-12-11 Andy

我不喜歡試圖擠壓像你所描述的元素在一起。我會建議給文本一點空間。字體在不同的瀏覽器中可能有所不同，只是給予足夠的空間來容納它們。好的問題，但+1。 – George

當我開始閱讀時，我認爲他們是最好的解決方案。如果不具吸引力，不知道該建議什麼。你可以強制行不換行，但如果它們太長，它會產生溢出。 – monkeymatrix

該標題看起來很奇怪，因爲字體大小表示字體高度並且沒有與任何寬度的定義關係。你應該改述你的問題，指出真正的問題是什麼。 –

不同的瀏覽器和操作系統有不同的字體處理，所以很難準確預測這些類型的東西。我所做的是編寫一個小的jQuery函數，它可以增加容器中字體的大小，直到它包裝之前，適應容器並且不包裝爲止。它通常在IE中加載時會閃爍，但在普通瀏覽器中並不明顯。你可以看到它在附加的鏈接動作（看看市場的名稱）：

http://www.hdradioalliance.com/station_guides/widget.php?id=77

http://www.hdradioalliance.com/station_guides/widget.php?id=21

http://www.hdradioalliance.com/station_guides/widget.php?id=61

隨意是否適合您的需要回收的代碼。

編輯：實際上，這段特定的代碼縮小了字體，直到它的容器是一行高 - 而不是我所說的，這是另一種方式。我已經做到了這一點。這是它：

$(document).ready(function(){ 
    var headingSize = 1; 
    while($('#headingSling h1 span').height() > 34 && parseInt($('#headingSling h1 span').css('font-size').replace(/\D\./g,'')) > 10){ 
     headingSize -= 0.01; 
     $('#headingSling h1 span').css('font-size', headingSize+'em'); 
    } 
});

來源

2012-12-11 15:51:51 Hoatzin

如何使文字寬度在任何瀏覽器中均等匹配？

回答

相關問題