Quill JS如何为span元素的尺寸类设置行高且无需使用inline-block

方案1：纯CSS轻量解决方案（无需修改Quill逻辑，现代浏览器兼容） #

核心思路是通过CSS的:has选择器识别「整段内容全部被字号span包裹」的场景，直接调整父级<p>标签的行高和字号，无需修改<span>的display属性。

/* 编辑器基础样式 */
.ql-editor p {
  line-height: 1.5; /* 常规字号默认行高，按需调整 */
  margin: 0 0 1em 0; /* 段落默认间距，按需调整 */
  font-size: 14px; /* 常规字号大小 */
}

/* 整段设置为小字号的场景 */
.ql-editor p:has(> span.ql-size-small:only-child) {
  font-size: 12px; /* 小字号尺寸 */
  line-height: 1.4; /* 小字号对应自定义行高 */
}

/* 整段设置为大字号的场景 */
.ql-editor p:has(> span.ql-size-large:only-child) {
  font-size: 18px; /* 大字号尺寸 */
  line-height: 1.6; /* 大字号对应自定义行高 */
}

/* 行内部分文本设置字号的场景 */
.ql-editor span.ql-size-small {
  font-size: 12px;
}
.ql-editor span.ql-size-large {
  font-size: 18px;
}

该方案完全保留Quill原有生成逻辑，<span>仍为默认inline属性，Shift+Enter软换行不会产生多余空行，也不存在排版错位问题。

方案2：自定义Quill Blot（全浏览器兼容，根源解决问题） #

核心思路是扩展Quill的属性系统，整段选中设置字号时直接将类挂载到<p>块级标签上，从根源避免类嵌套在<span>中产生的问题。

1. 首先注册块级字号属性：

import Quill from 'quill';
const Parchment = Quill.import('parchment');

// 注册块级字号属性，作用于p等块级元素
const BlockSizeAttributor = new Parchment.Attributor.Class('block-size', 'ql-size', {
  scope: Parchment.Scope.BLOCK,
  whitelist: ['small', 'large']
});
Quill.register(BlockSizeAttributor, true);

// 初始化Quill后重写字号工具栏的处理逻辑
const quill = new Quill('#editor', { /* 你的原有配置 */ });
const sizeControl = quill.getModule('toolbar').controls.find(item => item[0] === 'size');
sizeControl[1].handler = function (value) {
  const range = quill.getSelection();
  if (!range) return;
  const [currentLine] = quill.getLine(range.index);
  // 判断是否选中了整个段落
  const isFullParagraphSelected = range.length === currentLine.length();

  if (isFullParagraphSelected) {
    // 整段选中：给块级元素加字号类，清除行内字号类
    quill.format('block-size', value, 'user');
    quill.format('size', null, 'user');
  } else {
    // 部分选中：给行内span加字号类，清除块级字号类
    quill.format('size', value, 'user');
    quill.format('block-size', null, 'user');
  }
};

2. 添加对应CSS样式：

.ql-editor p.ql-size-small {
  font-size: 12px;
  line-height: 1.4;
}
.ql-editor p.ql-size-large {
  font-size: 18px;
  line-height: 1.6;
}
/* 保留行内字号样式 */
.ql-editor span.ql-size-small {
  font-size: 12px;
}
.ql-editor span.ql-size-large {
  font-size: 18px;
}

该方案兼容所有主流浏览器，不会产生任何排版问题，完全满足你提出的所有需求。

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