根据文本长度动态更改字体大小

Question

我需要将用户输入的文本显示到固定大小的 div 中。我想要的是自动调整字体大小，以便文本尽可能多地填充框。

我可能想从最大字体大小开始，当文本太大而不适合容器时，缩小字体大小直到适合并且字体必须显示为单行。

原文由 user2613399 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

假设你有这个：

 <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();
    }
}

工作样本

 $(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();
  }
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

原文由 putvande 发布，翻译遵循 CC BY-SA 3.0 许可协议