我知道这可以很容易地用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/....
其他回答
如果从头开始在Bootstrap 4
访问https://bootstrap.build/app 单击搜索模式 搜索$enable- response -font-sizes并打开它。 单击“导出主题”保存自定义引导CSS文件。
正如许多人在@DMTinter的帖子的评论中提到的，OP询问的是字符变化的数量(“数量”)。他还问了关于CSS的问题，但正如@Alexander所指出的，“只有CSS是不可能的”。据我所知，在这个时候这似乎是正确的，所以人们想知道下一个最好的事情似乎也是合乎逻辑的。
我对此并不感到特别自豪，但它确实有效。似乎要写太多的代码来完成它。这就是核心:
function fitText(el){
var text = el.text();
var fsize = parseInt(el.css('font-size'));
var measured = measureText(text, fsize);
if (measured.width > el.width()){
console.log('reducing');
while(true){
fsize = parseInt(el.css('font-size'));
var m = measureText(text, fsize );
if(m.width > el.width()){
el.css('font-size', --fsize + 'px');
}
else{
break;
}
}
}
else if (measured.width < el.width()){
console.log('increasing');
while(true){
fsize = parseInt(el.css('font-size'));
var m = measureText(text, fsize);
if(m.width < el.width()-4){ // not sure why -4 is needed (often)
el.css('font-size', ++fsize + 'px');
}
else{
break;
}
}
}
}
这是一个JS Bin: http://jsbin.com/pidavon/edit?html,css,js,console,output 请建议可能的改进(我不是真的对使用画布来测量文本感兴趣…看起来开销太大了(?))。
感谢@Pete的measureText函数: https://stackoverflow.com/a/4032497/442665
编辑:注意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/....
注意:此解决方案根据视口大小而不是内容的数量而更改
我刚刚发现这是可能的使用大众单位。它们是与设置视口宽度相关的单元。它有一些缺点，比如缺乏传统浏览器的支持，但这绝对是值得认真考虑的。另外，你仍然可以为旧的浏览器提供备份，如下所示:
p {
font-size: 30px;
font-size: 3.5vw;
}
http://css-tricks.com/viewport-sized-typography/ 而且 https://medium.com/design-ux/66bddb327bb1
你可能会对calc方法感兴趣:
font-size: calc(4vw + 4vh + 2vmin);
完成了。调整数值，直到符合你的口味。
来源:https://codepen.io/CrocoDillon/pen/fBJxu
