Question

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

通过截断字符串，表格看起来没问题，但现在用户无法在截断的文本的其余部分找到（浏览器中的CTRL + F）。

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

谢谢！

Answer 1

简单/有趣的解决方案：

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

Answer 2

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

Answer 3

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

Answer 4

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

我使用类似的技术六年来隐藏按钮中的文字，用背景图片设置样式：

.button {
    display: inline-block;
    text-indent: 120%;
    white-space: nowrap;
}

Answer 5

你需要试试这个：

http://kineticjs.com/

是一个很好的图书馆

在查找期间显示隐藏文本

5 个答案: