javascript - 对于具有 ContentEditable ="true"的元素，在溢出时向左滚动文本

Question

我有一个可编辑的跨度，我希望文本在溢出时向左滚动。我所追求的行为与 input type="text"元素相同。也就是说，如果您键入的内容过多而无法放入该元素，它就会开始向左滚动，以便始终显示最后一个字符并隐藏开头的字符。

这是我正在做的一个例子:

<style>
    .editable {
        position:absolute;
        background-color: lightgoldenrodyellow;
        cursor: text;
        display: inline-block;
        white-space: nowrap;
        top:100px;
        left:100px;
        width:200px;

    }
</style>

<span contenteditable="true" class="editable"></span>

问题是溢出导致元素外的文本；我希望它如上所述滚动到左侧。这可能吗？

如果有人想问我为什么不直接使用输入元素，原因是我需要设置 innerHTML 以提供一些格式，例如文字的颜色编码。这就是我这样做的动机，所以如果你有一个 contenteditable 元素的替代方案，我愿意接受。谢谢。

Answer 1

overflow:hidden 帮助:

.editable {
  background-color: lightgoldenrodyellow;
  cursor: text;
  display: inline-block;
  white-space: nowrap;
  width: 100px; 
  overflow:hidden
}

<span contenteditable="true" class="editable">type here </span>