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

唯一的方法可能是为不同的屏幕大小设置不同的宽度，但这种方法是非常不准确的，你应该使用js解决方案。

h1 {
    font-size: 20px;
}

@media all and (max-device-width: 720px){
    h1 {
        font-size: 18px;
    }
}

@media all and (max-device-width: 640px){
    h1 {
        font-size: 16px;
    }
}

@media all and (max-device-width: 320px){
    h1 {
        font-size: 12px;
    }
}

注意:此解决方案根据视口大小而不是内容的数量而更改

我刚刚发现这是可能的使用大众单位。它们是与设置视口宽度相关的单元。它有一些缺点，比如缺乏传统浏览器的支持，但这绝对是值得认真考虑的。另外，你仍然可以为旧的浏览器提供备份，如下所示:

p {
    font-size: 30px;
    font-size: 3.5vw;
}

http://css-tricks.com/viewport-sized-typography/ 而且 https://medium.com/design-ux/66bddb327bb1

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

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

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

<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);

如果从头开始在Bootstrap 4

访问https://bootstrap.build/app 单击搜索模式 搜索$enable- response -font-sizes并打开它。 单击“导出主题”保存自定义引导CSS文件。