我正在页面上显示文章。文章标题有时会溢出到两行，甚至可能在第二行只有一个单词。这是非常不可取的。使用 jQuery/CSS，以编程方式确定标题的新字体大小以使它们保持在一行的最佳方法是什么？
【问题讨论】：
标签： jquery css user-interface
有点像黑客，但是：这样的事情会让你接近。它可能需要更多的调整。基本上，它克隆元素并将克隆的文本设置为  ，因此它知道一行的高度是多少。然后它会减小元素的字体大小，直到它小于目标高度。
请记住，您还需要将此函数附加到父级的 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 正确。例如，将句号包含在：
<span id="check">.</span>
您现在可以检查句号的位置，并减小文本大小，直到它更接近您希望的位置。如果将此特定短语的行高设置为非常大，则更容易确定。
【讨论】：
我只是在这里猜测 - 我们可以通过使用 JS 来知道文本容器的高度，然后在必要时减小字体大小吗？我想这会因为更改而引入页面内容调整大小。
【讨论】：
您可以只计算标题中有多少个字符，然后据此计算出字体大小。更多字符 = 更小的字体大小。
我会设置允许字体大小的大小上限，以防止出现愚蠢的结果。
【讨论】：
计数字符是一种解决方案，但您必须考虑字符的宽度。 '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();
}
});
【讨论】：