Question

报纸通常根据单词占用的空间为每个故事设置标题字体的样式。例如，在此展开中，您可以看到文本已设置为适合一行：

就此而言，根据文章大小，您可以看到每个标题的不同尺寸。

使用CSS和jquery的某种组合，是否可以根据它的长度将样式规则应用于标题？因此，对于短标题“短标题”将具有更大的字体大小和字母间距以适合一行。并且“文章标题稍长一些”会有较小的字体大小和字母间距，以适合两行。

为了简单起见，假设标题位于单列固定宽度（400px）文本块之上。

Answer 1

过去一段时间我曾问过这样的问题，但不记得得到了很好的回应。但是今天，我有几个想法。

对于每个标题，如果它只有第一个字母（创建标题的副本，截断其文本，并在屏幕外检查其高度），则可以检查标题的高度与标题的高度。例如：

“这是一个非常长的标题”可能是125px高，其中“T”可能只有42px高。然后，您可以设置一个循环，将字体大小缩小1个像素，直到标题的高度等于或小于42px。

另一种方法是用非中断空格替换所有空格，然后缩小，直到标题的宽度等于或小于其父级的宽度。

Answer 2

作为一个起点，假设您有一个“long”类，它为标题提供了比变量“threshold”的值更长的替代样式。然后，您可以使用

在长标题上设置此类

$(':header').each(function () {
    $(this).toggleClass('long',$(this).text().length > threshold);
})

Answer 3

这当然是可行的，但很难做好。执行此操作的基本算法是首先确定字符串的大小。接下来，以特定大小创建字符串，然后查看它是否与目标“足够接近”。如果没有，请以新的大小/样式重新创建字符串并重复。

这是一个链接，它将向您展示如何在JavaScript中测量字符串的大小： http://blog.mastykarz.nl/measuring-the-length-of-a-string-in-pixels-using-javascript/