你可能会对calc方法感兴趣:

font-size: calc(4vw + 4vh + 2vmin);

完成了。调整数值，直到符合你的口味。

来源:https://codepen.io/CrocoDillon/pen/fBJxu

编辑:注意attr()它与css中的calc()有关。将来你也许能做到。

不幸的是，目前没有css唯一的解决方案。这就是我建议你做的。给元素一个title属性。并使用文本溢出省略号来防止设计的破坏，让用户知道有更多的文本在那里。

<div style="width: 200px; height: 1em; text-overflow: ellipsis;" title="Some sample dynamic amount of text here">
 Some sample dynamic amount of text here
</div>

.

.

.

或者，如果您只是想根据视口减小大小。CSS3支持相对于视图端口的新维度。

body {
   font-size: 3.2vw;
}

3.2vw =视口宽度的3.2% 3.2vh =视口高度的3.2% 3.2vmin =小于3.2vw或3.2vh 3.2vmax =大于3.2vw或3.2vh 看到css-tricks.com/..。也可以看看caniuse.com/....

你的动态文本一定来自某个地方。在我的例子中，这看起来像:

<div class="large" :data-contentlength="Math.floor(item.name.length/7)">[[ item.name ]]</div>

我的CSS类:

.large[data-contentlength="1"]{ font-size: 1.2em; }
.large[data-contentlength="2"]{ font-size: 1.1em; }
.large[data-contentlength="3"]{ font-size: 1.0em; }
.large[data-contentlength="4"]{ font-size: 0.9em; }
.large[data-contentlength="5"]{ font-size: 0.8em; }
.large[data-contentlength="6"]{ font-size: 0.7em; }
.large[data-contentlength="7"]{ font-size: 0.6em; }

我也有“非大型”文本类:

[data-length="1"]{ font-size: 1.00em; }
...

编辑: 当attr()在所有浏览器中都可用时，这变得更容易一些: https://developer.mozilla.org/en-US/docs/Web/CSS/attr#browser_compatibility

此外，如果CSS可以划分2个单位值(例如px和ch)，这可能会更动态，目前这必须手动完成。

在这里看到的:

https://jsfiddle.net/qns0pov2/3/

创建一个1ch的立方体，看看它在你的目标单位中有多大(在它的px中)，计算每行字符的数量，并使用该值来获得每个内容长度的完美字体大小。

小提琴也显示了这种方法的问题:平均字符宽度小于1ch(基于0)，但有像M这样的字符更大(大约70%)。

因此，如果你希望保证字符适合空间调整小提琴这样:——ch-width: calc(8.109 * 1.7);

如果你对平均情况更感兴趣:——ch-width: calc(8.109 * 0.92);

因为公认的答案并不能真正解决问题，所以我基于jkrei0的答案在React中创建了一个解决方案。这将使动态文本根据其长度增长/收缩，就像在PowerPoint中一样。

这里是代码盒的链接:https://codesandbox.io/s/relaxed-rosalind-ielb8o

作为参考，一个非css解决方案:

下面是一些JS，根据容器内的文本长度来调整字体大小。

代码依赖于略有修改的代码，但相同的想法如下:

function scaleFontSize(element) {
    var container = document.getElementById(element);

    // Reset font-size to 100% to begin
    container.style.fontSize = "100%";

    // Check if the text is wider than its container,
    // if so then reduce font-size
    if (container.scrollWidth > container.clientWidth) {
        container.style.fontSize = "70%";
    }
}

对于我来说，当用户在下拉菜单中进行选择时，我会调用这个函数，然后填充菜单中的div(这是动态文本出现的地方)。

    scaleFontSize("my_container_div");

此外，我还使用CSS省略号(“…”)来截断甚至更长的文本，如下所示:

#my_container_div {
    width: 200px; /* width required for text-overflow to work */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

所以,最终:

短文:“苹果” 完全渲染，漂亮的大字母。 长文本:“苹果和橘子” 通过上面的JS缩放函数缩小70%。 超长文本:“苹果、橘子和香蕉……” 通过上面的JS缩放函数和CSS规则，缩小70%并用“…”省略号截断。

您还可以尝试使用CSS字母间距来使文本更窄，同时保持相同的字体大小。

试试MartijnCuppens的RFS(响应式字体大小)库，它可能会在Bootstrap中实现