Chrome中带截断效果的contenteditable div为何会添加空白？

你使用contentEditable的div实现单行文本省略效果，但输入超出容器宽度的文本后，出现自动添加空白、省略号左移的问题，同时光标无法随文本同步右移。

问题成因 #

1. contentEditable元素的默认渲染逻辑和静态文本容器不同，浏览器会为可编辑元素添加额外布局调整，导致文本偏移
2. text-overflow: ellipsis在contentEditable元素上兼容性不佳，动态输入文本时，浏览器无法准确计算溢出位置
3. 可编辑子元素未设置宽度，内部文本布局超出预期范围

解决方案 #

修改后的HTML结构

<div style="width:130px; background-color:lime; padding:0;">
  <div 
    contentEditable 
    style="
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-sizing: border-box;
      outline: none;
      padding:0;
    "
  >
    Hi I am a long piece of text, well sort of long lalalaa
  </div>
</div>

光标同步的JavaScript代码

const editableDiv = document.querySelector('[contentEditable]');

editableDiv.addEventListener('input', () => {
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    const range = selection.getRangeAt(0);
    const rect = range.getBoundingClientRect();
    editableDiv.scrollLeft = rect.right - editableDiv.getBoundingClientRect().left;
  }
});

关键说明 #

• 给可编辑div添加width:100%和box-sizing:border-box，确保它完全填充父容器，消除布局偏移
• 去除默认的padding和outline，减少额外布局干扰
• 通过input事件监听文本输入，实时获取光标位置并调整元素的scrollLeft，实现光标与文本同步右移

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