如何在 HTML 中造成换行而不中断文本的 control-F“可查找性”？

Question

假设我有以下 HTML：

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

如果用户按 control-F（或 macOS 上的 command-F），他们可以搜索“二三”，并且它将成功查找/匹配两个范围内的文本。

如何在跨度之间插入换行符（以便“三”在新行上开始），同时仍然确保用户可以像以前一样使用 control-F 找到文本？

例如，如果我插入

<br>

标签，或将跨度的样式更改为

display: block

，则它不再起作用。我只能在单个范围内查找/匹配文本。 （在某些情况下，Chrome 确实允许我将换行符粘贴到查找对话框中 - 即使我自己无法键入它 - 或者我可以找到“two Three”，但我希望能够找到文本，就好像有中间有一个空格：正好是“二三”）

如有必要，我愿意更改 HTML 的结构。

Answer 1

我找到了一个使用

<wbr>

元素和一点 JavaScript 的解决方案。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

这是代码：

let element = document.getElementById("paragraph"); // Get the element
let width = element.offsetWidth; // Get the current width of the element
element.style.width = width - 1 + "px"; // Set the new width to be the original width minus 1px

#paragraph {
  white-space: nowrap; 
  width: fit-content
}

<p id="paragraph">
  one two<wbr /> three four
</p>