CODEWITHSUNDEEP
javascripthtmlcss
Pratyush Pranjal
Pratyush Pranjal

Reputation: 554

How to detect text overflow in contenteditable

I am trying to detect text overflow in contenteditable div, so that when text enter after the div width(800px), it will alert about the overflow. I am trying below code.

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>

Upvotes: 2

Views: 1142

Answers (1)

lalithkumar
lalithkumar

Reputation: 3540

Try the below one:

$(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");
    }
  });
});
#test{
  max-width: 800px;
  text-overflow: ellipsis;
  white-space: nowrap; 
  overflow:hidden; 
  font-size: 76px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content" contenteditable="true">
  <div id="test">Click here..</div>
</div>

.textwidth() function has taken from here

Upvotes: 1

Related Questions