javascript - 是否可以根据标题的长度设置标题大小的样式？

Question

报纸通常根据文字占据的空间大小来设计每个故事的标题字体。例如，在此跨页中，您可以看到文本的样式已调整为适合一行:

http://www.newsdesigner.com/blog/images/feb05/best/hc6.php

在这个上，您可以根据文章大小看到每个标题的不同大小。

http://www.snd.org/snd28/worldsbest/Aripaev_files/Aripaev08.jpg

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

为简单起见，假设标题位于单列固定宽度 (400 像素) 文本 block 上方。

Answer 1

前段时间我曾问过这样的问题，但不记得得到了很好的答复。不过，今天我有几个想法。

标题高度与单个字符高度

对于每个标题，您可以检查标题的高度与只有第一个字母的标题的高度(创建标题的副本， chop 其文本，并检查其在屏幕外的高度)。例如:

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

替换空格和收缩

另一种方法是将所有空格替换为不间断空格，然后收缩直到标题的宽度等于或小于其父项的宽度。