1

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

通常，如果我的网站上有一行文本，我只想占用一行而不是下降到一秒钟，我必须确保我写的文本足够短，可以在分配的范围内作为一行所有主要浏览器中的空间。例如，我可能会在 div 中写一些文本（也具有以像素为单位的指定宽度），这些文本在 firefox、safari 等上显示为一行，但是当我去检查 ie8 时，出于某种原因它被显示，它没有空间容纳最后一个单词并将该单词放到第二行的开头。我想知道是否有某种方法可以使文本在宽度方面占据相同的空间，无论如何。我在这里缺少某种简单的解决方案吗？

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

4

1 回答 1

0

不同的浏览器和操作系统的字体处理略有不同，因此很难准确预测这些事情。我所做的是编写一个小的 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-11T15:51:51.833 回答