让contentEditable="true"元素内容溢出时向左滚动

当然可以实现这个需求！其实只需要结合CSS样式和一点点JavaScript就能搞定，下面是具体的实现方案：

步骤1：HTML结构 #

首先我们需要一个contenteditable="true"的span元素，给它加个类名方便样式和脚本操作：

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

步骤2：CSS样式配置 #

我们需要让span具备类似input的外观，同时限制宽度并隐藏溢出内容：

.editable-span {
  /* 转为行内块元素，才能设置宽度 */
  display: inline-block;
  /* 设置固定宽度，模拟input的宽度 */
  width: 200px;
  /* 隐藏横向溢出的内容 */
  overflow-x: hidden;
  /* 强制文本不换行 */
  white-space: nowrap;
  /* 模拟input的边框和内边距 */
  border: 1px solid #ccc;
  padding: 3px 5px;
  /* 可选：去掉默认的focus outline，换成自定义样式 */
  outline: none;
}

.editable-span:focus {
  border-color: #66afe9;
  box-shadow: 0 0 5px rgba(102, 175, 233, 0.6);
}

步骤3：JavaScript控制滚动 #

核心逻辑是每次输入内容后，自动将滚动位置调整到最右侧，这样就能始终显示最后输入的字符：

const editableSpan = document.querySelector('.editable-span');

// 监听输入事件（包括键盘输入、粘贴等）
editableSpan.addEventListener('input', () => {
  // scrollWidth是内容的总宽度，clientWidth是元素的可视宽度
  // 把scrollLeft设置为两者的差值，就能滚动到最右侧
  editableSpan.scrollLeft = editableSpan.scrollWidth - editableSpan.clientWidth;
});

效果说明 #

当你在这个可编辑span中输入内容时：

• 内容超出元素宽度后不会换行，也不会溢出到元素外部
• 每输入一个字符，文本都会自动向左滚动，始终显示最后输入的内容
• 整体行为和input type="text"完全一致

额外注意点 #

• 如果用户手动拖动滚动条到左侧，再次输入时依然会自动跳回最右侧，这和原生input的行为一致
• 如果你需要支持非常老旧的浏览器，可能需要注意contenteditable的兼容性，但目前主流浏览器（Chrome、Firefox、Edge、Safari）都完美支持

内容的提问来源于stack exchange，提问作者Len White