当contentEditable溢出时，将文本移至焦点输出开始

Question

看看这个例子：https://jsfiddle.net/qpysmb9t/

只要contentEditable元素中的文本大于div的max-width（尝试输入一些长文本），就会隐藏左侧部分，并显示右侧的内容。键入时没关系，但在重点关注时，我想将其反转并从头开始显示文本。

我该如何实现？

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

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

更新：建议的解决方案是移动插入符号的位置。此示例说明了这一点：

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

不幸的是，仅移动插入符号不会重新定位文本。