Question

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

Answer 1

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

请记住，您还需要将此函数附加到父级的resize（）。

$(document).ready(function() {
    $(".shrink").each(function() {
        var targetHeight = $(this).clone().html("&nbsp;").insertAfter($(this));

        while ($(this).height() > targetHeight.height()) {
            $(this).css("font-size", parseInt($(this).css("font-size")) - 1);
        }

        targetHeight.remove();
    });
});

Answer 2

一个简单的解决方案是将一个元素放在该行的末尾，并减小文本大小，直到其offsetHeight正确为止。例如，将整个句号包装在：

中

<span id="check">.</span>

您现在可以检查完整停靠点的位置，并缩小文本大小，直到它更接近您希望的位置。如果将此特定短语的行高设置得非常大，则可以更容易确定。

Answer 3

我只是猜测 - 我们可以通过使用JS来了解文本容器的高度，然后在必要时减小字体大小吗？我想这会因为更改而引入页面内容调整大小。

Answer 4

您可以只计算标题中的字符数，并根据该字体计算出字体大小。更多字符=较小的字体大小。

我会对字体大小允许的大小和大小设置上限，以防止愚蠢的结果。

Answer 5

计算字符是一种解决方案，但您必须考虑字符的宽度。 'W'比'i'宽，除非你使用固定宽度的字体。

此外，您不能保证在客户的浏览器中可以使用您选择的字体，他的字体大小设置与您的相同。

然而，你可以结合两种解决方案 - 首先，使用一些字符计数算法来近似字体大小 - 假设字符具有固定的宽度，然后使用客户端js更正你的计算，如果js确定无论如何，这条线已被拆分。

这需要一些调整，但我相信可以实现可接受的结果。

Answer 6

我假设你有一个默认的文本大小，所以将其设置为，并检查元素的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();
  }
});

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

6 个答案: