如何调整字体大小以尽可能适合文本区域的宽度和高度？

Question

我在textarea 中输入文本。我希望动态调整字体大小，以便文本尽可能多地用类型填充可用的textarea。为此，我在背景中使用span 和display:none 样式来测量当前输入文本的宽度并将其重新缩放到可用宽度。我的逻辑和浏览器有问题：

1. span 随可用浏览器窗口大小缩放
2. 短文本不一定要缩小字体大小，也可以在一个完整的单词后换行，这样文本区域的高度也占满（不仅是宽度）。

Working fiddle to illustrate the idea.

如何调整文本区域的宽度和高度？

Answer 1

棘手的部分是减少字体大小的算法。这里有两个解决方案。 first one 是你见过的最丑陋的代码（抱歉这里是凌晨 4:30，我累了）但它展示了解决方案，递归函数

$(document).ready(function() {
  var textAreaHeight = $('#inp').height();
  var fontSize = 200;
  var font = fontSize + "px";

  $('#inp').css("font-size", font);
  $('.hidden').css("font-size", font);

  $('#inp').keyup(function() {
    var txt = $(this).val();
    $('#hiddenSpan').html(txt);

    fontSize = decreaseFontSize(fontSize);
    font = fontSize + 'px';

    $('#inp').css("font-size", fontSize + 'px');
  })

  function decreaseFontSize(tempFontSize) {
    var textHeight = $('#hiddenSpan').height();
    if (textHeight > textAreaHeight) {
      var factor = .99; /* Arbitrary scaling factor */
      tempFontSize *= factor;
      $('#hiddenSpan').css("font-size", tempFontSize + 'px');

      return decreaseFontSize(tempFontSize);
    } else {
      return tempFontSize;
    }
  }
})

second one 更简洁，但只要您到达末尾，只需添加另一行。

$(document).ready(function() {
    var textAreaHeight = $('#inp').height();
    var fontSize = 200;
    var inputLength = 0;
    var font = fontSize + "px"

    $('#inp').css("font-size", font);
    $('.hidden').css("font-size", font);

    $('#inp').keyup(function() {
        var txt = $(this).val();
        $('#hiddenSpan').html(txt);

        var textHeight = $('#hiddenSpan').height();

        if( textHeight > textAreaHeight ) {
            var font = decreaseFontSize( textHeight) + "px";
            $(this).css("font-size", font);
            $('.hidden').css("font-size", font);
        }
    })

    function decreaseFontSize( textHeight) {
        fontSize = textAreaHeight/(textHeight/fontSize); /* textHeight / fontSize will tell you how many rows are currently in the #hiddenSpan and will then fit those rows inside the height of the textArea */
        return fontSize;
    }
})

实际上，使这两种解决方案都起作用的答案的主要部分是我将其添加到您的#hiddenSpan

#hiddenSpan {
  max-width: 300px; /* Makes the text wrap like the input box */
  display: inline-block; 
  word-wrap: break-word; /* Paired with display, allows the text to wrap */
  font-family: "Times New Roman", Times, serif; /* Added the same font to both elements so that they could actually be coordinated */
} 

在用我的小手指能收集到的尽可能多的字符测试这两个之后，我注意到递归函数稍微好一点，但没有你想象的那么多。