1

Take a look at this example: https://jsfiddle.net/qpysmb9t/

Whenever text in the contentEditable element becomes bigger that the max-width of the div(try typing some long text), than the left part gets hidden and what's on the right is shown. This is okay while you type, but on focus out I'd like to reverse this and show text from the beginning.

How can I achieve this?

<div tabindex="-1" contenteditable="true" class="name-data">This is test</div>

.name-data{
  max-width:180px;
  white-space: nowrap;
  overflow-x: hidden;
}

UPDATE: The solution suggested is to move the caret position. This example illustrates this:

https://jsfiddle.net/qpysmb9t/1/

Unfortunately, just moving the caret does not reposition text.

potato
  • 4,479
  • 7
  • 42
  • 99
  • Possible duplicate of [How to set caret(cursor) position in contenteditable element (div)?](https://stackoverflow.com/questions/6249095/how-to-set-caretcursor-position-in-contenteditable-element-div) – imvain2 Feb 25 '19 at 22:06
  • I've added another example that illustrates that suggested answer does not solve my problem – potato Feb 25 '19 at 22:58

0 Answers0