You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Summernote应用Bullet项目符号后行间距变更配置咨询

Summernote项目符号行高异常解决方案

Summernote官方没有提供专门用于设置有序/无序列表默认行高的独立配置项。应用项目符号后行高突变的问题,是编辑器默认样式中普通段落<p>与列表类元素<ul>/<ol>/<li>的line-height规则不匹配导致的,可通过以下两种方式修复:

方案1:添加自定义CSS覆盖默认样式

这是兼容性最好、改动最小的方案,直接在项目全局样式中加入以下规则即可,数值可根据你的需求调整:

/* 适配Summernote编辑区内的列表行高 */
.note-editor .note-editing-area .note-editable ul,
.note-editor .note-editing-area .note-editable ol,
.note-editor .note-editing-area .note-editable li {
  line-height: 1.6 !important;
  /* 可选:同步调整边距,避免上下间距异常 */
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

如果需要让编辑器输出的富文本在前端页面展示时也保持一致的行高,给渲染富文本的容器下的ul/ol/li元素也设置相同的line-height规则即可。

方案2:通过初始化回调动态注入样式

如果不想改动全局CSS,可在Summernote初始化时通过onInit回调注入自定义样式:

$('#summernote').summernote({
  // 你的其他原有配置,比如height、toolbar等
  onInit: function () {
    const customStyle = document.createElement('style');
    customStyle.textContent = `
      .note-editable ul, .note-editable ol, .note-editable li {
        line-height: 1.6 !important;
        margin-top: 0.25em;
        margin-bottom: 0.25em;
      }
    `;
    document.head.appendChild(customStyle);
  }
});

内容的提问来源于stack exchange,提问作者rohan

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.05 19:18:02