Javascript 如何根据插入的字符的动态数量缩小字体大小?

Javascript 如何根据插入的字符的动态数量缩小字体大小?,javascript,jquery,html,css,fonts,Javascript,Jquery,Html,Css,Fonts,我正在尝试处理字体大小的动态字符量,就像现在我有一组字符的字体大小:40px增加字符的字体大小应在空间内减少 这是我的html代码: <table width="620"><tr><td width="30%"></td><td ><span style="font-size:40px; font-size: 1.8vw; font-weight:bold;">BhairavPrasadVishwanatham</sp

我正在尝试处理字体大小的动态字符量,就像现在我有一组字符的字体大小: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
访客
XYZ
查看:
ABC
有效期至:2016年5月26日

现在我需要名称:BhairavprasadVishwanatham应根据输入的数字字符自动调整字体,如:-


如果我输入的字符超过9个,则字体应减少并适合td。

在您的span中添加一个类,例如:

<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>

快速脏纯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>

这是您要减少的文本
var el=document.querySelector('.decreaseFontSize');
var text=el.innerText | | el.textContent;
var endFontSize=40;

如果(text.length)首先,请有可能格式化您的HTML!其次,您尝试过什么?对我来说,您似乎什么都没做…我已格式化您的HTML,它似乎有几个问题。请先解决这些问题。
<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>