我知道这可以很容易地用Javascript解决，但我只对纯CSS解决方案感兴趣。
我想要一种动态调整文本大小的方法，以便它总是适合固定的div。下面是示例标记:
<div style="width: 200px;身高:1 em;溢出:隐藏;" > <p>这里的一些示例动态文本量</p> < / div >
我在想，也许这可以通过在ems中指定容器的宽度，并获得字体大小继承该值?
当前回答
你可能会对calc方法感兴趣:
font-size: calc(4vw + 4vh + 2vmin);
完成了。调整数值，直到符合你的口味。
来源:https://codepen.io/CrocoDillon/pen/fBJxu
其他回答
为什么不在服务器端根据字符数设置类呢?
.NotMuchText {
font-size: 20px;
}
.LotsOfText {
font-size: 10px;
}
我还想要一个非javascript解决方案，CSS解决方案，并诉诸于PHP/CSS解决方案。
我是这样使用smth的:
1 .风格。fontSize = 15.6/(文档。
哪里:1 -父母div Id和2 - Id的div与我的文本
你的动态文本一定来自某个地方。在我的例子中，这看起来像:
<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文件。
创建一个查找表，根据<div>中的字符串长度计算字体大小。
const fontSizeLookupTable = () => {
// lookup table looks like: [ '72px', ..., '32px', ..., '16px', ..., ]
let a = [];
// adjust this based on how many characters you expect in your <div>
a.length = 32;
// adjust the following ranges empirically
a.fill( '72px' , );
a.fill( '32px' , 4 , );
a.fill( '16px' , 8 , );
// add more ranges as necessary
return a;
}
const computeFontSize = stringLength => {
const table = fontSizeLookupTable();
return stringLength < table.length ? table[stringLength] : '16px';
}
通过实证测试对所有参数进行调整和调优。
