我有一个包含几列的数据表。其中之一是具有不同长度文本的评论列。有些评论很短,但有些评论可能很长。现在我只显示评论的前 50 个字符,并将原始文本放入“标题”属性中,以便用户仍然能够阅读整个值。
通过截断字符串,表格看起来没问题,但现在用户无法在被截断的其余文本中找到(浏览器中的 CTRL+F)任何内容。
所以我的想法是让整个注释隐藏在源代码中,但对浏览器的查找机制可见。有可能吗?你们有什么建议?
谢谢!
我有一个包含几列的数据表。其中之一是具有不同长度文本的评论列。有些评论很短,但有些评论可能很长。现在我只显示评论的前 50 个字符,并将原始文本放入“标题”属性中,以便用户仍然能够阅读整个值。
通过截断字符串,表格看起来没问题,但现在用户无法在被截断的其余文本中找到(浏览器中的 CTRL+F)任何内容。
所以我的想法是让整个注释隐藏在源代码中,但对浏览器的查找机制可见。有可能吗?你们有什么建议?
谢谢!
简单/有趣的解决方案:
将评论容器 CSS 设置为overflow:hidden;
or overflow:scroll;
,并根据需要设置容器的宽度和高度。应该只为用户显示部分文本,但浏览器可以完全阅读。
我无法想象没有肮脏的技巧是可能的,比如 font-size:0.1px 之类的。您可以为您的用户提供显示全尺寸文本的选项或为此实现您自己的搜索功能。为什么用户应该期望使用本机搜索引擎对他不存在的数据的结果。您可以绑定到 CTRL-F 但也许有人更改了键绑定或正在使用菜单,所以这对我来说是一个死胡同。
好吧,想一想……当你使用查找功能时,浏览器会做什么?它滚动到找到的文本并选择它。如果文本不可见,这怎么可能?我想不出有什么办法。我能想到的唯一选择是实现您自己的查找功能,覆盖浏览器的。它会像浏览器一样查看发布的评论并找到文本,除了它能够查看隐藏的文本并可能扩展它。至于究竟如何覆盖浏览器的查找,也许你可以绑定到 Ctrl+F,在那个绑定中,return false
以防止浏览器使用其查找。我不知道这是否可行,这只是一个想法。正如您所说,基本问题是浏览器无法搜索隐藏文本,我不知道如何做到这一点。
不是一个好的答案,但很好:Webkit 和其他引擎中可能存在错误。如果将文本设置为white-space: nowrap;
and overflow: hidden;
,它将在视觉上被截断,但如果在隐藏文本中找到搜索匹配,它将再次出现。
六年来,我使用了一种类似的技术来隐藏按钮中的文本,这些按钮使用背景图像进行样式设置:
.button {
display: inline-block;
text-indent: 120%;
white-space: nowrap;
}