Question

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

span会根据可用的浏览器窗口大小进行缩放
短文本不一定要缩小字体大小，但也可以在一个完整的单词后面换行，这样textarea也会被高度占用（不仅仅是宽度）。

Working fiddle to illustrate the idea.

我如何进行调整，使得textarea尽可能在宽度和高度上都被填充？

Answer 1

棘手的部分是减少fontSize多少的算法。这是两个解决方案。 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 */
}

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

如何调整fontsize以尽可能地适应textarea的宽度和高度？

1 个答案: