我知道这可以很容易地用Javascript解决，但我只对纯CSS解决方案感兴趣。
我想要一种动态调整文本大小的方法，以便它总是适合固定的div。下面是示例标记:
<div style="width: 200px;身高:1 em;溢出:隐藏;" > <p>这里的一些示例动态文本量</p> < / div >
我在想，也许这可以通过在ems中指定容器的宽度，并获得字体大小继承该值?
当前回答
注意:此解决方案根据视口大小而不是内容的数量而更改
我刚刚发现这是可能的使用大众单位。它们是与设置视口宽度相关的单元。它有一些缺点，比如缺乏传统浏览器的支持，但这绝对是值得认真考虑的。另外，你仍然可以为旧的浏览器提供备份，如下所示:
p {
font-size: 30px;
font-size: 3.5vw;
}
http://css-tricks.com/viewport-sized-typography/ 而且 https://medium.com/design-ux/66bddb327bb1
其他回答
试试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;
}
}
因为公认的答案并不能真正解决问题，所以我基于jkrei0的答案在React中创建了一个解决方案。这将使动态文本根据其长度增长/收缩，就像在PowerPoint中一样。
这里是代码盒的链接:https://codesandbox.io/s/relaxed-rosalind-ielb8o
calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));
用这个方程。
对于大于或小于1440和768的任何值，您可以给它一个静态值，或者应用相同的方法。
vw解决方案的缺点是你不能设置缩放比例，比如在屏幕分辨率1440下的5vw最终可能是60px的字体大小，这是你的想法字体大小，但当你将窗口宽度缩小到768时，它可能最终是12px，而不是你想要的最小尺寸。使用这种方法，您可以设置上边界和下边界，字体将在两者之间自行缩放。
我是这样使用smth的:
1 .风格。fontSize = 15.6/(文档。
哪里:1 -父母div Id和2 - Id的div与我的文本
