html – Chrome搜索功能(ctrl f)找到隐藏的文本(但它是不可见的!)

前端之家收集整理的这篇文章主要介绍了html – Chrome搜索功能(ctrl f)找到隐藏的文本(但它是不可见的!)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
看看这个 fiddle.

输入Ctrl F并搜索获取”…

对于我来说,Chrome从这个文本中发现不可见的文本:一个长期的选项被切断

它在Linux / Ubuntu 12.04 Chrome版本31.0.1650.63上转载

HTML

<!--works for a div-->
<div>
    A long option that gets cut off
</div>

<!--but not for a select-->
<select>
    <option>One - A long option that gets cut off</option>
    <option>Two - A long option that gets cut off</option>
</select>

CSS

select {
    width:100px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;
}

div {
    border-style:solid; 
    width:100px; 
    overflow:hidden; 
    white-space:nowrap; 
    text-overflow:ellipsis;
}

如何在页面显示文本,而不是空白的空白块,浏览器突出显示

解决方法

不幸的是,这是Chrome中一个已知的错误.

错误报告:

> https://bugs.webkit.org/show_bug.cgi?id=93709
> https://code.google.com/p/chromium/issues/detail?id=13563

它发生的原因是文本溢出:省略号;错误报告说.

没有解决的bug,自2010年以来!

避免问题…

这不是很漂亮,但它的工作原理在已知的问题:

select {
    width:100px; 
    overflow:hidden; 
    white-space:nowrap;
    /* text-overflow: ellipsis; */
}

div {
    border-style:solid; 
    width:100px; 
    overflow:hidden; 
    white-space:nowrap;
    /* text-overflow: ellipsis; */
}

小提琴:http://jsfiddle.net/digitalextremist/t5eUe/228/

或绕过它…

使用JavaScript来检测溢出,并自动插入一个省略号作为图像(或文本块)在右侧和/或左侧,或右侧内侧(具有较高z指数)等:

> Detect if text has overflown

原文链接:https://www.f2er.com/html/230644.html

猜你在找的HTML相关文章