Hello all,

working with HTML Editor, i came across to situation where we getting a horizontal scroll bar when we enter data in the numbered list line having width higher than the Editable Div.

To solve this issue we have this block of code.

On keydown event of the Editable Div (HTML Editor) we can bind a function that will find the width of the div and the scroll width as well and will put white-space CSS on the selected <li> to normal which will put the overflown words in the next line.

Index.html page:

<div id="editorDiv" contenteditable="true"  name="htmlEditor" style="overflow-x: auto; border: 1px solid #abadb3; padding: 15px 10px; width: 100%;"></div>

JavaScript Code :

$( "#editorDiv" ).keydown(function() {
   var current = window.getSelection();
   if (parseInt($('#txtarea')[0].clientWidth) <= parseInt($('#txtarea')[0].scrollWidth) + 5) {
        if ($(current).length > 0 && current.nodeName == 'LI') {
               $(current).css('white-space', 'normal');
         }
         else {
                var selectedLi = $(current).closest('li');
                 if ($(selectedLi).length > 0 && selectedLi[0].nodeName == 'LI') {
                     $(selectedLi).css('white-space', 'normal');
                 }
           }
   }
});