如何让contentEditable段落插入内容时受自身尺寸限制不溢出？

实现可编辑单行段落，要求输入的文本始终不超出段落自身尺寸范围，文本即将溢出时直接截断，禁止输入超出容器范围的内容。
现有实现通过CSS设置溢出隐藏、隐藏段落子元素避免换行，仅能实现溢出内容的视觉隐藏，无法阻止用户输入超出容器长度的文本，不符合预期。

CSS部分 #

div {
  width: 50vw;
  height: 50vh;
  margin: 10px auto;
  background-color: gray;
}

p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 25%;
  background-color: brown;
  text-align: center;
  white-space: nowrap;
  overflow-x: hidden;
}

/* 避免内容换行成多行 */
p * {
  display: none;
}

HTML部分 #

<div>
  <p contentEditable="true">
    Edit me! Unfortunally I can be overflowed... :(
  </p>
</div>

纯CSS只能实现溢出内容的视觉裁剪，无法从输入层面拦截超长内容，需要搭配JS监听输入事件做动态截断：

• 优化CSS规则，移除原代码中隐藏所有子元素的规则，补充文本截断提示样式：

p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 25%;
  background-color: brown;
  text-align: center;
  white-space: nowrap;
  overflow-x: hidden;
  /* 可选：溢出位置显示省略号，明确提示内容被截断 */
  text-overflow: ellipsis;
}

• 添加JS交互逻辑，每次输入后检测内容宽度是否超出容器，超出则从末尾逐字删除内容直到宽度适配容器，同时兼容中文输入法组合输入的场景，避免拼音输入过程中被误截断：

const editParagraph = document.querySelector('p[contenteditable="true"]');
let isComposing = false;

// 监听输入法输入开始
editParagraph.addEventListener('compositionstart', () => {
  isComposing = true;
});

// 监听输入法输入完成
editParagraph.addEventListener('compositionend', () => {
  isComposing = false;
  editParagraph.dispatchEvent(new Event('input'));
});

// 监听内容输入做截断处理
editParagraph.addEventListener('input', () => {
  if (isComposing) return;
  if (editParagraph.scrollWidth <= editParagraph.clientWidth) return;
  
  while (editParagraph.scrollWidth > editParagraph.clientWidth) {
    const lastNode = editParagraph.lastChild;
    if (!lastNode) break;
    if (lastNode.nodeType === Node.TEXT_NODE) {
      lastNode.textContent = lastNode.textContent.slice(0, -1);
      if (!lastNode.textContent) editParagraph.removeChild(lastNode);
    } else {
      editParagraph.removeChild(lastNode);
    }
  }
});

实现效果：输入文本长度到达容器宽度边界后，再输入的内容会被直接拦截，不会出现溢出容器的内容，同时保留单行编辑的特性。

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