我知道这可以很容易地用Javascript解决，但我只对纯CSS解决方案感兴趣。
我想要一种动态调整文本大小的方法，以便它总是适合固定的div。下面是示例标记:
<div style="width: 200px;身高:1 em;溢出:隐藏;" > <p>这里的一些示例动态文本量</p> < / div >
我在想，也许这可以通过在ems中指定容器的宽度，并获得字体大小继承该值?
当前回答
编辑:注意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/....
其他回答
试试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;
}
}
我是这样使用smth的:
1 .风格。fontSize = 15.6/(文档。
哪里:1 -父母div Id和2 - Id的div与我的文本
因为公认的答案并不能真正解决问题，所以我基于jkrei0的答案在React中创建了一个解决方案。这将使动态文本根据其长度增长/收缩，就像在PowerPoint中一样。
这里是代码盒的链接:https://codesandbox.io/s/relaxed-rosalind-ielb8o
如果从头开始在Bootstrap 4
访问https://bootstrap.build/app 单击搜索模式 搜索$enable- response -font-sizes并打开它。 单击“导出主题”保存自定义引导CSS文件。
