javascript - 如何自动调整 html 标签的大小，使文本适合一行且不需要换行？

Question

我有一个典型的网上商店，每个产品都有一个带有产品标题的标签。一些产品名称很长，导致标签自动换行到三行。

有没有办法在纯 CSS 或 javascript 或 jQuery 中动态更改标签的字体大小，使其成为填充父 div 所需的最大大小，但无需自动换行？

到目前为止，我已尝试使用 jQuery 根据文本中的字符数添加一系列类，但这远非精确。例如:

jQuery:

$('h1').each( function() { 
   if( $(this).html().length > 15 )
       $(this).addClass('long');
 }
 etc...

CSS:

       h1.entry-title.long 
       { font-size: 2.2em; letter-spacing: normal; }

谁能提出更优雅/更准确的解决方案？

Answer 1

您或许可以考虑使用 responsive unit字体的措施，使其适应container ，也在调整大小；如果容器是 body ，你要找的是 Viewport-percentage lengths .

干杯