Question

在文本区域中输入文本并且它变得比区域宽时，文本将被包裹到下一行。有没有办法可以通过编程方式确定何时发生这种情况？

Answer 1

发生包装时没有触发实际事件，但如果你知道textarea的宽度，你可以破解解决方案。

在文本区域中侦听更改事件，并将文本传输到包含其内容的div中;

<div class="textwidth"></div>

风格：

.textwidth {
  position: absolute;
  visibility: hidden;
  height: auto;
  width: auto;
}

使用文本内容计算div的宽度，并将其与textarea的常量宽度进行比较：

$('textarea').on('keyup', function() {
  var lastLine = $(this).val().split('/n').pop();
  var width = $('.textwidth').text(lastLine).width(); 
  if ( width >  $('textarea').width() ) {
    // fire wrap event
  }
});

这里有点粗鲁的小提琴，可以让你知道如何继续：http://jsfiddle.net/cXbAh/1/

Answer 2

您可以使用“隐藏”范围测量每个线宽如果线宽大于textarea宽度，则换行

demo here

function textWidth(txt, font, padding) {
    $span = $('<span></span>');
    $span.css({
        font:font,
        position:'absolute',
        top: -1000,
        left:-1000,
        padding:padding
    }).text(txt);
    $span.appendTo('body');
    return $span.width();
}

如何检测线条何时自动包裹在textarea中？

2 个答案: