contenteditableでテキストのオーバーフローを検出する方法

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

下記お試しください：関数がかかりました

$(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()をnからhere