以编程方式确定单行显示的字体大小
我正在页面上显示文章。 文章标题有时会溢出到两行，甚至可能在第二行只有一个单词。 这是非常不受欢迎的。 使用jQuery / CSS，以编程方式确定标题的新字体大小以保持一行的最佳方法是什么？
有点像黑客但是：这样的事情会让你接近。 它可能需要更多的tweeking。 基本上，它克隆元素并将克隆的文本设置为＆nbsp，因此它可以了解一行的高度。 然后它会减小元素的字体大小，直到它小于目标高度。
请记住，您还需要将此函数附加到父级的resize（）。
$(document).ready(function() { $(".shrink").each(function() { var targetHeight = $(this).clone().html(" ").insertAfter($(this)); while ($(this).height() > targetHeight.height()) { $(this).css("font-size", parseInt($(this).css("font-size")) - 1); } targetHeight.remove(); }); }); 一个简单的解决方案是将一个元素放在该行的末尾，并减小文本大小，直到其offsetHeight正确为止。 例如，将整站包装在：
.
您现在可以检查完整站点的位置，并缩小文本大小，直到它更接近您希望的位置。 如果将此特定短语的行高设置得非常大，则可以更容易地确定。
我只是猜测 – 我们可以通过使用JS来了解文本容器的高度，然后在必要时减小字体大小吗？ 我想这会因为更改而引入页面内容resize。
您可以只计算标题中有多少个字符，并根据它计算字体大小。 更多字符=更小的字体大小。
我会盖上允许字体大小有多大和多小的上限，以防止愚蠢的结果。
计算字符是一种解决方案，但您必须考虑字符的宽度。 ‘W’比’i’宽，除非你使用固定宽度的字体。
此外，您不能保证在客户的浏览器中可以使用您选择的字体，他的字体大小设置与您的相同，等等。
但是，您可以将两个解决方案结合起来 – 首先，使用一些字符计数算法来估计字体大小 – 假设字符具有固定宽度，然后使用客户端js更正您的计算，如果js确定该行已经无论如何分裂。
这需要一些调整，但我相信可以实现可接受的结果。
我假设你有一个默认的文本大小，所以将其设置为，并检查元素的offsetHeight。 如果它显然是两行，缩小字体大小，直到offsetHeight大幅减少约50％
使用jQuery的一个例子……
var defaultSize = 36; // if title is taller than this, it will be shrinked $(".articleTitle").each(function() { var h = $(this).height(); var i = defaultSize; while(h > defaultSize) { i--; this.style.fontSize = i + 'px'; h = $(this).height(); } });