为什么选择文本时相邻的 div 之间有垂直间隙？答案

【问题标题】：Why is there a vertical gap between adjacent divs when selecting text?为什么选择文本时相邻的 div 之间有垂直间隙？
【发布时间】：2019-10-31 08:33:12
【问题描述】：

我正在制作一个富文本编辑器，它类似于 Google Docs 的克隆。由于我不会进入这里的原因，文本编辑器中的每一行都被包装到它自己的 div 容器中。例如，如果有 3 行文本，则文本编辑器中将有 3 个子“行节点”（呈现为无样式的 div）。并且在每个 line 节点内都有内联 span 元素来控制样式，例如 Bold、Italic 等。

我遇到的问题是，我无法理解为什么在多行上选择文本时，每行之间会出现难看的空白垂直间隙。我为此使用 Draft.js，但据我所知，它不应该有所作为；没有应用样式或边距。我什至尝试让每一行 div 及其跨度元素的高度完全相同，但问题仍然存在。

我的猜测是这是由一些本机浏览器行为引起的。我真正关心的是：我可以“修复”它吗？我的意思是，我知道这是可能的，因为 Google Docs 在选择文本时没有这个间距问题……但它再次使用了一个完全自定义的渲染引擎和自定义光标。感谢您的任何建议

编辑：所以我发现的一个临时解决方法（见下图）是将每个 div 的高度和跨度降低到一个固定值（在这种情况下，height: 16.4px）。但由于显而易见的原因，这不是一个理想的解决方案。我仍在寻找一种“正确”的方式来实现我想要的任何样式，并且在选择文本时不会在相邻 div 之间出现这些间隙

【问题讨论】：

可能是行高，你调查过吗？
如果它们像您描述的那样位于不同的 div 中，则可能是垂直对齐问题。尝试设置vertical-align:top
您是否尝试过我在下面使用 line-height 的建议？
@zgood 我有。感谢您的建议，但它似乎对选择外观没有任何影响。我也看过垂直对齐。它也没有效果。似乎唯一明显影响选择的是高度属性（请参阅我编辑的问题）。仍在寻找真正的解决方案
尝试分享重现问题的代码，以便我们与您一起测试

标签： css reactjs contenteditable

【解决方案1】：

我相信您在谈论line-height，您可以在其中控制两个元素/文本之间的空间。

在下面试试：

div {
  line-height:100px;
}

<div>Hello World!</div>

<div>How are ya?</div>

【讨论】：

@IvanKaraman OP 是否在谈论 HTML 元素和文本之间的空白或其他内容？
感谢您的提示，但不幸的是 line-height 对可见选择没有影响。只有 height 属性似乎有所不同（请参阅已编辑的问题）。不过，我仍在寻找合适的解决方案/答案
@Jordan 你可以为这些文本粘贴你的 html 代码的快照吗？只是为了直观地了解它是如何被操纵的。
@LuayWadie 请查看我的答案中的屏幕截图，以直观地表示我想要实现的目标:)
@Jordan 当我定位你的 div 元素并将它们的 line-height 设置为 17px 时，它解决了问题。那不是您要找的东西？

【解决方案2】：

感谢您的所有建议。事实证明这是一个非常具有挑战性的问题，并且几乎没有（如果有的话）可以用纯 CSS 完成。只有 div 或 span 元素的 height 属性似乎对文本选择有任何明显的影响。检查 Google Docs 元素会发现他们使用自己的自定义选择引擎：

关闭这个是因为我至少知道现在可以如何实施解决方案，即使它会非常复杂和耗时。再次感谢您的建议。

【讨论】：