克服 contenteditable 中不一致的 <br> 选择行为

Question

我注意到 Chrome 中有一个奇怪的行为，我试图选择一堆 div-br-div 行。

在这段代码中：

  <section contenteditable>
  <div>--- end selection here ---</div>
  <div>Some -div-br-div- lines:</div>
  <div><br></div>
  <div><br></div>
  <div><br></div>
  <div><br></div>
  <div><br></div>
  <div><br></div>
  <div>--- start selection above this line ---</div>
  </section>

如果我在“开始选择”行上方开始选择，然后将其向上移动到“结束选择”行，我会得到以下行为：

在 Chrome 和 Brave 中，会跳过开头和下一行：

在 Firefox 中，所有 br 行都被跳过：

而在 Safari 中，所有选中的行都会被高亮显示：

如何让 Chrome 在选择时不会在视觉上跳过行并执行类似于 Safari 的正常文本编辑器行为？

这是一个演示，您可以在其中尝试选择行： https://jsfiddle.net/8r5m24t7/3/

请注意，如果我从非 br 行开始选择（例如，使用单词“start”），它将按预期选择：

谢谢。

Answer 1

实际上这些行并没有“跳过”。如果您复制然后粘贴到文本编辑器中，您将看到每个换行符都已被复制。它只是关于浏览器如何显示选择的方式。

如何让 Chrome 在选择中不跳过行

您根本不应该尝试这样做。您是内容创建者，因此您不对浏览器如何可视化选择空白字符负责。

此外，您应该使用 CSS 而不是使用 <br> 标签在块之间创建空格，在某些情况下应该仅用于单个换行符，因此在实际文档/应用程序中根本不会出现这种情况。