如何自动重新调整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，也可以调整大小;如果容器是身体，你要找的是Viewport-percentage lengths。

干杯

Answer 2

考虑到你说某些产品名称太长以至于它们跨越3行它可能会变得非常丑陋我猜，因此我添加了启用文本溢出的选项：省略号并将文本添加到标题中（所以如果字体大小低于16px，则全文将在鼠标悬停时显示为工具提示。

所以...基本上，会发生的事情是函数打开白色空间：nowrap在每个H1上都有一个滚动条，然后运行一个循环，其中每次迭代都减少font-size，直到需要滚动条消失或者大小符合限制。最后，滚动条再次隐藏。

您只需在H1上设置最低可接受大小（min_font_size）和可能的其他过滤器。

关于优雅的数量，我猜......嗯......也许可以添加缩小动画？

jQuery.fn.hasHScrollBar = function () {
   return this.get(0).scrollWidth > this.innerWidth();
}

$(document).ready(function () {

    // Set minimum size:
    var min_font_size = 16;

    $('h1').each(function () {
        var font_size = parseInt($(this).css("font-size"));
        $(this).css("white-space", "nowrap");
        $(this).css("overflow", "scroll");
        while ($(this).hasHScrollBar()) {
            if (font_size < min_font_size) {
                $(this).css("text-overflow", "ellipsis");
                break;
            }
            $(this).css("font-size", font_size + "px");
            font_size--;
        }
        $(this).css("overflow", "hidden");
    });
});

分散注意力：

向主体或容器添加不透明度0：

body {
    opacity: 0;
    transition: opacity 0.4s ease-in;
}

还原类：

.fade-in {
   opacity: 1;
}

将页面标准化为准备好（在字体调整之前或之后）：

$(document).ready(function () {
   $('body').addClass("fade-in");

Answer 3

FWIW：当我刚刚打开此页面以查看新答案时，我遇到了一个新的StackOverflow功能：建议的答案。该页面有一些有趣的选项，包括FitText和使用SVG的直接CSS解决方案。

Font scaling based on width of container