javascript – 使用css和html动态更改基于文本长度的字体大小

前端之家收集整理的这篇文章主要介绍了javascript – 使用css和html动态更改基于文本长度的字体大小前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我需要将用户输入的文本显示为固定大小的div.我想要的是自动调整字体大小,以便文本尽可能地填充框.

我可能想要以最大字体大小开始,而文本太大而不能容纳容器时,缩小字体大小直到适合,字体必须显示为单行.是否可以这样做只使用css和html.

解决方法

说你有这个:
<div id="outer" style="width:200px; height:20px; border:1px solid red;">
    <div>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Integer mollis dui felis,vel vehicula tortor cursus nec</div>
</div>

那么你可以做一些像:

$(document).ready(function () {
    resize_to_fit();
});

function resize_to_fit(){
    var fontsize = $('div#outer div').css('font-size');
    $('div#outer div').css('fontSize',parseFloat(fontsize) - 1);

    if($('div#outer div').height() >= $('div#outer').height()){
        resize_to_fit();
    }
}

猜你在找的JavaScript相关文章