css - Quill JS – 在没有 inline-block 的跨度元素上设置 Quill 的大小类的行高

Question

我处于需要 Quill 作为所见即所得编辑器的环境中。

我在工具栏中添加了“大小”，以显示小、正常和大文本。

Quill 使用类来设置字体大小，但是，它将类添加到<span>文本所在元素的内部，例如 a <p>，这样将文本设置为小将产生以下 HTML：

<p>This <span class="ql-size-small">is a</span> test</p>

当只有部分副本的字体大小调整时，上述方法可以正常工作。

但是，当我在 Quill 中将整个段落设置为大小时，问题就来了。这会产生以下 HTML：

<p><span class="ql-size-small">This is a test</span></p>

因为现在，使用了父标签的行高，结果在行<p>和段落之间产生了巨大的间隙，如下所示：

而且因为<span>是display: inline我不能设置line-height它。

所以，我穿上display: inline-block元素..但这会导致其他两个问题，首先：

其次...假设您想要一个如下所示的段落，其中第一行是粗体并且在第一行<br />之后有一个（使用 Shift+Enter）：

但是......现在我在 Quill 中为整个段落设置了一个大小，现在它看起来像这样（！）：

它看起来像这样，因为我们必须添加display: inline-block到.ql-size-small类中，并且因为 Quill 将<br />（来自 Shift+Enter）放在<span>元素的 INSIDE 上，所以 HTML 看起来像这样：

<p>
    <strong style="color: rgb(110, 110, 110);" class="ql-size-small">
        Lorem ipsum dolor sit met
    </strong>
    <span style="color: rgb(110, 110, 110);" class="ql-size-small">
        <br>
        This is a test this is a test this is a test this is a test.&nbsp;This is a test this is a test this is a test this is a test.
    </span>
</p>

现在，对于第二个，如果 Quill 将<br />OUTSIDE 放在了 OUTSIDE 上（在 the<strong>和<span>元素之间，这不会成为问题。但是因为我们必须放在display: inline-blockclass.ql-size-small上line-height才能工作，所以<br />会创建一个空白线。

---

我不确定该怎么做，似乎没有解决方案可以让我拥有：

• 尺寸
• Shift+Enter 换行
• 小文本的可配置行高inline-block
• 没有大的缝隙

现在，我可以滥用<h5>and<h6>并将它们反转用于特定于案例/页面的样式，我需要一个粗体的文本行，没有底部边距，但感觉我不应该这样做。

标签： cssquill