[英]How to make the font-size smaller based on the dynamic amount of characters inserted?
我正在尝试处理字符的动态数量上的字体大小,就像现在我有一组字体大小为 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。
向您的跨度添加一个类,例如:
<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' )
});
快速肮脏的纯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 比 i 更宽)。 使用普通图像可能会派上用场,假设保存为 svg 的文本将调整为适当的大小,但是您仍然需要估计字母的宽度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.