如何调整字体大小以尽可能适合textarea的宽度和高度? [英] How to adjust fontsize to fit textarea width and height as much as possible?

问题描述

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

I enter text into a textarea. I wish the fontsize to be adjusted dynamically such that the text fills up the available textarea with type as much as possible. For this I use a span with display:none style in the background to measure the width of the currently entered text and rescale it to the available width. I have problems with the logic and the browser though:

1. span根据可用的浏览器窗口大小进行缩放
2. 短文本不一定要按比例缩小字体大小，但也可以在一个完整的单词后自动换行，以使文本区域也占据高度(不仅是宽度).

1. The span scales with the available browser window size
2. Short text should not necessarily scale down in font size, but could also wrap after one complete word, such that the textarea is also occupied in height (not only in width).

用小提琴来说明这个想法.

我应该如何调整以使文本区域在宽度和高度上都尽可能填充?

How would I adjust such that the textarea is filled as much as possible both in width and height?

推荐答案

棘手的部分是减小fontSize的算法.这是两个解决方案. 第一个 是您见过的最丑陋的代码(对不起，它是4:30 am在这里，我很累)，但它展示了解决方案递归函数

The tricky part is the algorithm for how much to decrease the fontSize. Here's two solutions to it. The first one is the ugliest code you've ever seen (Sorry it's 4:30am here and I'm tired) but it demonstrates the solution, recursive functions

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

第二个更干净，但只要到达末尾就添加另一行.

The second one is cleaner but simply adds another row whenever you reach the end.

$(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

Now really, the main part of the answer which makes both of these solutions work is that I added this to your #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 */
} 

在用我的小手指可以尝试的尽可能多的字符测试了这两个字符之后，我注意到递归函数的性能稍好一些，但没有您想象的那么好.

After testing both of these with as many characters as my little fingers could muster, I noticed the recursive function does slightly better, but not as much as you would think.

这篇关于如何调整字体大小以尽可能适合textarea的宽度和高度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！