找到文本的总宽度，并在限制小提琴jquery后将其分解

Question

这是一个检查div中写入的总字符宽度的函数....如果这个宽度超过限制设置，则有一个断行....

问题 我需要检查段落testLine的单行宽度，但我无法将函数.textWidth()应用于它...

如何将功能应用于它？用断线返回段落。

//function
$.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width();
};


//building
$('#inpt').on('input', function() {
var containerLmt="260";//pixels
var TotalCharsWidth=$(this).textWidth()
$('#inpt-width').html( TotalCharsWidth+ 'px');

 /*
//creating the paragraph 
 var words = $(this);
 var line = '';
 for(var n = 0; n <  words.length; n++) {
          var testLine = line + words[n] + ' ';

 if (TotalCharsWidth > containerLmt && n > 0) { //problem

            line = words[n] + TotalCharsWidth + ' ';
        
}else {
            line = testLine;

          }

  }

   */




}).trigger('input');

#inpt{border: 1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    
<div id="inpt" contenteditable>ddhhhd</div>
<div id="inpt-width"></div>
<br>

Answer 1

以下是您要找的内容：https://codepen.io/titan_dl_1904/pen/VXdBeM?editors=1010

函数textWidth工作正常。 问题是你调用错误的函数来获取单词。应该是var words = $(this).html();而不是var words = $(this);

//creating the paragraph 
var words = $(this).html();
var line = '';
for(var n = 0; n <  words.length; n++) {
    var testLine = line + words[n] + ' ';
    if (TotalCharsWidth > containerLmt && n > 0) { //problem
    console.log('123');
        line = words[n] + TotalCharsWidth + ' ';
    } else {
        line = testLine;
    }
}