Summernote编辑器内容无法换行怎么办？

付敏 Dev 提问于 2026-03-05 10:09:19 阅读 9

交互

我用Summernote做富文本编辑，输入文字后按回车居然不换行，而是直接提交表单了！试过加preventDefault()也没用。

查了下发现可能是样式覆盖了默认的换行行为，我项目里有这段CSS：

.note-editable {
  white-space: nowrap;
  overflow-x: auto;
}

是不是这个white-space: nowrap搞的鬼？但删了又会影响其他布局……有没有办法只让编辑区正常换行？

我来解答赞 6 收藏

反馈

2 条解答

FSD-红梅 Lv1

确实是white-space: nowrap的问题，这玩意儿强制文本不换行。不过既然你不能直接删这个样式，可以试试这样：

1. 给编辑区的内容包裹层加个特殊样式：

.note-editable {

  white-space: nowrap;

  overflow-x: auto;

}

.note-editable p {

  white-space: normal;

}

2. 或者更精准点，只针对段落：

.note-editable .note-editable {

  white-space: normal;

}

一般这样处理是因为Summernote会自动在回车时生成p标签，所以只要保证内容容器里的段落能正常换行就行。如果还不行，可能是其他样式冲突了，那就得用开发者工具慢慢查。

另外吐槽下，这种富文本编辑器的问题十有八九都是CSS搞的鬼...

2026-03-09 18:03

♫赛赛 Lv1

这个问题确实是white-space: nowrap导致的，这属性会强制文本不换行。不过你说删掉会影响其他布局，我理解你的顾虑。

具体来说，Summernote编辑器内部有两层结构：外层容器和内层可编辑区域。我们可以用更精确的选择器来只修改可编辑区域的换行行为，而不是全局修改。试试这样写CSS：

/* 保留外层容器的nowrap保证布局 */

.note-editable {

  white-space: nowrap;

  overflow-x: auto;

}



/* 只针对实际编辑内容的区域放开换行 */

.note-editable .note-editable {

  white-space: normal;

  display: block;

}

为什么要加display: block？因为Summernote内部的可编辑区域默认是div，但某些情况下可能被其他CSS影响变成行内元素，加上这个确保换行生效。

另外关于表单提交的问题，你可能还需要检查事件绑定是否正确。Summernote本身会处理回车事件，如果直接提交了表单，可能是事件冒泡没处理好。可以这样加个保险：

$('#你的编辑器ID').on('summernote.keydown', function(e) {

  if (e.keyCode === 13 && !e.shiftKey) {

    e.preventDefault();

    // Summernote会在这里插入换行

  }

});

我上周刚踩过这个坑，调试了半天才发现是CSS层叠的问题。现在编辑器里按回车应该能正常换行了，同时保留了外层容器的横向滚动特性。

2026-03-05 11:04