如何在HTML中插入换行且不破坏Ctrl-F文本搜索匹配功能？

问题背景 #

现有HTML结构：

<span>one two</span> <span>three four</span>

当前可通过Ctrl-F（Mac为Command-F）跨两个span搜索到带空格的“two three”。需要实现两个span间的换行（让“three”另起一行），同时保留该跨元素搜索功能。

已知无效方案：插入<br>标签或设置span为display:block，会导致搜索失效，仅能匹配单个span内的文本（部分Chrome场景支持粘贴换行符或搜“twothree”，但无法精准匹配带空格的“two three”）。

可行解决方案 #

方案1：文本节点换行 + CSS white-space: pre-line #

在两个span之间插入真实的文本换行（不是<br>标签），给父容器设置white-space: pre-line，让浏览器将文本换行渲染为视觉换行，同时不破坏文本搜索的连续性：

<div style="white-space: pre-line;">
  <span>one two</span>
  <span>three four</span>
</div>

注：两个span之间的换行是直接敲回车产生的文本节点，pre-line属性会解析该换行为视觉换行，但搜索时仍将“two”和“three”视为带空格连接的连续内容。

方案2：Flexbox 强制换行 #

通过Flex布局的换行特性，强制第二个span换行，不影响文本搜索逻辑：

<div style="display: flex; flex-wrap: wrap;">
  <span style="margin-right: 100%;">one two</span>
  <span>three four</span>
</div>

利用margin-right: 100%让第一个span占满整行宽度，第二个span自动换行，浏览器搜索时仍能识别跨元素的“two three”。

方案3：Grid 布局自动换行 #

使用Grid布局，默认每个子元素占一行，实现视觉换行的同时保留文本搜索连续性：

<div style="display: grid;">
  <span>one two</span>
  <span>three four</span>
</div>

Grid布局下子元素默认独占一行，视觉上满足换行需求，且不改变文本在搜索索引中的连续性。

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