Question

我正在尝试检测contenteditable div中的文本溢出，这样当文本在div宽度（800px）之后输入时，它会警告溢出。我正在尝试下面的代码。

HTML

var e = document.getElementById('test');
if (e.offsetWidth < e.scrollWidth) {
  alert("Overflow");
}

#test{
  max-width: 800px;
  text-overflow: ellipsis;
  white-space: nowrap; 
  overflow:hidden; 
  font-size: 76px;
}

<div class="content" contenteditable="true">
  <div id="test">Click here..</div>
</div>

Answer 1

尝试以下方法：

pattern space

CocoaPods

$(document).ready(function(){ $('.content').on('input',function(){ var e = document.getElementById('test'); $.fn.textWidth = function() { var htmlCalc = $('<span>' + this.html() + '</span>'); htmlCalc.css('font-size', this.css('font-size')) .hide() .prependTo('body'); var width = htmlCalc.width(); htmlCalc.remove(); return width; }; if ($('#test').textWidth() > $('#test').width()) { alert("Overflow"); } }); });函数取自here

如何在contenteditable中检测文本溢出

1 个答案: