我知道这可以很容易地用Javascript解决，但我只对纯CSS解决方案感兴趣。
我想要一种动态调整文本大小的方法，以便它总是适合固定的div。下面是示例标记:
<div style="width: 200px;身高:1 em;溢出:隐藏;" > <p>这里的一些示例动态文本量</p> < / div >
我在想，也许这可以通过在ems中指定容器的宽度，并获得字体大小继承该值?
当前回答
你的动态文本一定来自某个地方。在我的例子中，这看起来像:
<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);
其他回答
你的动态文本一定来自某个地方。在我的例子中，这看起来像:
<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);
这个解决方案也可能有帮助:
$(document).ready(function () {
$(window).resize(function() {
if ($(window).width() < 600) {
$('body').css('font-size', '2.8vw' );
} else if ($(window).width() >= 600 && $(window).width() < 750) {
$('body').css('font-size', '2.4vw');
}
// and so on... (according to our needs)
} else if ($(window).width() >= 1200) {
$('body').css('font-size', '1.2vw');
}
});
});
这对我很有效!
如果从头开始在Bootstrap 4
访问https://bootstrap.build/app 单击搜索模式 搜索$enable- response -font-sizes并打开它。 单击“导出主题”保存自定义引导CSS文件。
唯一的方法可能是为不同的屏幕大小设置不同的宽度，但这种方法是非常不准确的，你应该使用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;
}
}
正如许多人在@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
