在查找过程中显示隐藏的文本

Show hidden text during find

本文关键字：文本 隐藏 显示 查找 过程中      更新时间：2023-09-26

我有一个包含几列的数据表。其中之一是具有不同文本长度的注释列。有些评论很短，但其中一些可能很长。现在我只显示注释的前 50 个字符，并将原始文本放入"title"属性中，以便用户仍然能够阅读整个值。

通过截断字符串，表格看起来不错，但现在用户无法在被截断的文本的其余部分中找到（浏览器中的 CTRL+F）任何内容。

所以我的想法是使整个注释隐藏在源代码中，但对浏览器的查找机制可见。有可能吗？你们有什么建议？

谢谢！

简单/有趣的解决方案：

将注释容器 CSS 设置为 overflow:hidden; 或 overflow:scroll; ，并根据需要设置容器的宽度和高度。应仅向用户显示部分文本，但浏览器可以完全读取。

嗯，想想看...当您使用查找功能时，浏览器会做什么？它会滚动到找到的文本并选择它。如果文本不可见，这怎么可能？我想不出这行不通的办法。我能想到的唯一选择是实现您自己的查找功能，覆盖浏览器的功能。它会像浏览器一样查看已发布的评论并找到文本，除了它能够查看隐藏的文本并可能扩展它。至于如何准确覆盖浏览器的查找，也许您可以绑定到 Ctrl+F，并且在该绑定中，return false阻止浏览器使用其查找。我不知道这是否可行，这只是一个想法。正如你所说，基本问题是浏览器无法搜索隐藏的文本，我知道没有办法做到这一点。

我无法想象如果没有一些技巧，比如font-size：0.1px之类的。您可以为用户提供显示全尺寸文本的选项，也可以为此实现自己的搜索功能。为什么用户应该期望使用本机搜索引擎对不存在的数据产生结果。您可以绑定到 CTRL-F，但也许有人更改了键绑定或正在使用菜单，所以这对我来说是死胡同。

不是一个好的答案，但很好：Webkit 和其他引擎中有一个错误。如果将文本设置为 white-space: nowrap; 和 overflow: hidden; ，它将在视觉上被截断，但如果在隐藏的文本中找到搜索匹配项，则会再次出现。

六年来，

我一直使用类似的技术来隐藏按钮中的文本，这些按钮使用背景图像设置样式：

.button {
    display: inline-block;
    text-indent: 120%;
    white-space: nowrap;
}
相关文章：