Question

我有一个可编辑的范围，我希望文本在溢出时向左滚动。我所追求的行为与输入类型相同=＆＃34; text＆＃34;元件。也就是说，如果你键入太多不适合元素，它会开始向左滚动，以便始终显示最后一个字符并隐藏起始字符。

以下是我正在做的事情的一个例子：

<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以提供一些格式，例如单词的颜色编码。这是我这样做的动机，所以如果你有一个替代超过一个满足的元素，我愿意接受它。感谢。

Answer 1

overflow:hidden有帮助：

＆＃13;

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

＆＃13;

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

＆＃13;

使用ContentEditable =＆＃34; true＆＃34;

1 个答案: