以编程方式确定单行显示的字体大小

Question

我正在页面上显示文章.文章标题有时会溢出到两行,甚至可能在第二行只有一个单词.这是非常不受欢迎的.使用jQuery/CSS,以编程方式确定标题的新字体大小以保持一行的最佳方法是什么？

Answer 1

有点像黑客，但是：这样的事情会让你接近。它可能需要更多调整。基本上，它克隆元素并将克隆的文本设置为  ，因此它可以了解一行的高度。然后它会减小元素的字体大小，直到小于目标高度。

请记住，您还需要将此函数附加到父级的 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();
    });
});