contenteditable 元素无法原生单行，需结合 css（white-space: nowrap、overflow: hidden、text-overflow: clip）与 js（keydown 拦截 enter、paste 时过滤换行符并 inserttext）实现逼近 input 的单行效果。
contenteditable 元素如何强制单行且不换行
直接结论：contenteditable 本身没有“单行模式”，但可通过 CSS + JS 组合拦截回车、禁止软换行、隐藏溢出，逼近原生 <input type="text"> 行为。
为什么 white-space: nowrap 不够用
它只阻止文本自动折行，但用户仍可按 Enter 插入 <div> 或 <code><p></p>，导致多行结构；另外，粘贴富文本（比如带换行的 Word 内容）会直接破坏单行假设。
-
Enter默认插入块级元素（浏览器行为不一致：Chrome 插<div>，Firefox 插 <code><p></p>） -
white-space: nowrap对已存在的<br>或块标签无效 - 光标可能落在换行符后，视觉上“断开”，但 DOM 仍是单节点
- 监听
keydown，对Enter调用event.preventDefault() - 监听
paste，读取event.clipboardData.getData('text/plain')，过滤掉\n和\r - 避免用
input事件清理——太晚，DOM 已污染，光标位置易错乱
关键拦截：阻止 Enter 和粘贴换行
仅靠 CSS 无法解决交互逻辑，必须 JS 干预。重点不是“删掉换行”，而是“不让它产生”。
element.addEventListener('keydown', e => {
if (e.key === 'Enter') e.preventDefault();
});
element.addEventListener('paste', e => {
e.preventDefault();
const text = e.clipboardData.getData('text/plain').replace(/[\r\n]/g, '');
document.execCommand('insertText', false, text);
});
溢出隐藏与视觉对齐的坑
overflow: hidden 看似简单，但和 contenteditable 的光标渲染、选区高亮存在冲突。尤其在 Safari 中，横向滚动可能意外触发，或光标卡在末尾不可见。
立即学习“前端免费学习笔记（深入）”；
- 必须同时设
text-overflow: clip（而非ellipsis），否则选中时显示异常 - 避免
display: inline-block+ 固定宽高，容易导致光标偏移；推荐display: block+width: 100% - Safari 下需额外加
-webkit-appearance: none防止默认样式干扰
真正难的是光标和选区的稳定性——一旦 DOM 节点被 JS 清洗（比如删 <br>），浏览器可能重置光标到开头。所以优先拦截，而非善后。
