Question

我正在尝试处理动态字符大小的字体大小，就像现在我有字体大小的字符集：40px增加字符应该在空间内减少字体大小。

所以这是我的HTML代码：

<table width="620"><tr><td width="30%"></td><td ><span style="font-size:40px; font-size: 1.8vw; font-weight:bold;">BhairavPrasadVishwanatham</span><br/><span class="text-danger" style="text-align:center;font-weight:bold;font-size:20px;">VISITOR </span><br/><span class="h4 m-t-mini">XYZ</span><span class="clearfix text-center m-t-large"></span><br/><span class="h4 m-b-mini text-center">To See:</span><br/><span class="h3 text-bold m-b-small text-center">ABC</span><td></tr><tr><td></td><td><span class="clearfix"><br/><span style="font-size:16px;">Valid Thru: 26-05-2016</span><br/><br/></td></tr><td></td></tr></table>

现在我需要这个名字：BhairavprasadVishwanatham应该根据输入的数字字符自动调整字体，如： -

如果我输入超过9个字符，则应缩小字体并使其符合td。

Answer 1

在您的范围内添加一个类，例如：

<span class="h3 text-bold m-b-small text-center checkSize">ABC</span><td></tr><tr><td></td><td><span class="clearfix"><br/><span style="font-size:16px;">Valid Thru: 26-05-2016</span>

然后是jquery：

$(".checkSize").each(function() {
    if ($(this).html().length > 20) $(this)..css( "font-size", '5px' )
});

Answer 2

快速脏的纯js解决方案

<span class="decreaseFontSize">
    This is your text you want to reduce
</span>
<script>
var el = document.querySelector('.decreaseFontSize');
var text = el.innerText || el.textContent;
var endFontSize = 40;
if(text.length<9){
   endFontSize = 40;
}
if(text.length < 5){
   endFontSize = 20
}
...
el.style.fontSize = endFontSize+'px';
</script>

然而，您尝试实现的可能是使文本始终适合一行，并且不会根据字符数量自动缩放，而是根据字符宽度（w比所有非单字体字体中的宽度更宽）。由于该正常图像可能会派上用场，让我们说保存为svg的文本会调整到适当的大小，但是您仍然需要估计字母的宽度。

如何根据插入的动态字符数使字体大小变小？

2 个答案: