Html 如何使文本宽度在任何浏览器中都相等？

无论使用哪种浏览器，是否有某种技巧使字体大小占用相同的宽度？（我使用像素表示字体大小，但我不确定这与这个问题有多大关系。）

通常情况下，如果我的网站上有一行文字，我只想占用一行，而不想下降到第二行，那么我必须确保我写的文字足够短，可以在所有主浏览器的分配空间内作为一行。例如，我可能会在一个div（也有一个指定的像素宽度）中写入一些文本，在firefox、safari等上显示为一行，但当我检查ie8时，由于显示方式的原因，它没有空间容纳最后一个单词，并将该单词放在第二行的开头。我想知道是否有什么方法可以让文本在宽度上占据相同的空间。这里有没有什么简单的解决方案，我不知道

---

正如我所说的，我使用像素来表示字体大小，我一直在使用其他度量单位进行研究，但到目前为止，根据我的理解，使用em等其他度量单位表示字体大小并不能真正解决这个问题，因为它们基本上是像素的抽象。即使有一种方法可以使用不同的度量单位，我也很想知道是否有一种解决方案可以让我保留像素，因为这只是我首选的度量单位。

不同的浏览器和操作系统的字体处理略有不同，所以很难准确地预测这些事情。我要做的是编写一个小jQuery函数，在容器中增加字体的大小，直到它包装之前，使其适合容器而不是包装。它通常在IE中加载时闪烁，但在普通浏览器上不明显。您可以在所附的链接中看到它的作用（查看市场名称）：

如果代码符合您的需要，请随意回收

Edit:实际上，这段代码会收缩字体，直到其容器达到一行高，而不是我所说的那样，反之亦然。我已经用两种方法做了。这是：

$(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');
    }
});

---

我不喜欢试图像你描述的那样把元素挤在一起。我建议给文本留出一点空间。在不同的浏览器中，字体可能会有所不同，只需给它们足够的空间即可。好问题，+1.当我开始读这篇文章时，我认为em是最好的解决方案。如果这不吸引人，我不知道该建议什么。您可以强制行不换行，但如果行太长，则会产生溢出。标题看起来很奇怪，因为字体大小表示字体高度，并且与任何宽度都没有定义的关系。你应该重新表述你的问题，说明真正的问题是什么。