StackOverflow上有几个关于offsetWidth/clientWidth/scrollWidth(和-Height)的问题,但没有一个问题可以全面解释这些值是什么.
此外,网上有几个来源,提供令人困惑或不正确的信息.
你能给出一个完整的解释,包括一些视觉提示吗？另外,如何使用这些值来计算滚动条宽度？
是否有任何使用纯HTML和CSS截断文本的好方法,以便动态内容可以适应固定宽度和高度的布局？
我已经截断由服务器端的逻辑宽度(即一个盲目猜测的字符数),但由于一个"W"是比更宽的"i"这倾向于是次优的,并且还需要我重新猜测(并保持调整)每个固定宽度的字符数.理想情况下,截断将在浏览器中发生,浏览器知道渲染文本的物理宽度.
我发现IE有一个text-overflow: ellipsis属性正是我想要的,但我需要这个是跨浏览器.这个属性似乎(有些？)标准但Firefox不支持.我发现各种 解决方法基础上overflow: hidden,但他们要么不显示省略号(我希望用户知道的内容被截断),或显示这一切的时候(即使内容没有截断).
有没有人有一个很好的方法来适应固定布局中的动态文本,或者是服务器端截断的逻辑宽度和我现在要获得的一样好？
我在页面上有一组块元素.它们都具有CSS规则white-space,overflow,text-overflow set,以便修剪溢出的文本并使用省略号.
但是,并非所有元素都溢出.
无论如何,我可以使用javascript来检测哪些元素溢出？
谢谢.
补充:我正在使用的示例HTML结构.
<td><span>Normal text</span></td>
<td><span>Long text that will be trimmed text</span></td>
SPAN元素始终适合单元格,它们应用了省略号规则.我想检测省略号何时应用于SPAN的文本内容.
我有一个固定高度的div overflow:hidden;
我想用jQuery检查div是否有溢出超过div的固定高度的元素.我怎样才能做到这一点？
该text-overflow:ellipsis;CSS属性必须是的,微软已经适合网页所做的几件事情之一.
所有其他浏览器现在都支持它...除了Firefox.
自2005年以来,Firefox开发人员一直在争论它,但尽管对它有明显的需求,它们似乎无法真正实现它(即使是实验性-moz-实现也足够了).
几年前,有人设法破解Firefox 3以支持省略号.黑客使用该-moz-binding功能使用XUL实现它.现在有很多网站正在使用这种黑客攻击.
坏消息？Firefox 4正在删除该-moz-binding功能,这意味着此黑客将无法再使用.
因此,一旦Firefox 4发布(本月晚些时候,我听到),我们将回到让它无法支持此功能的问题.
所以我的问题是:还有其他方法吗？(我试图避免回到Javascript解决方案,如果可能的话)
[编辑]
很多投票,所以我显然不是唯一想知道的人,但到目前为止我有一个答案基本上都是'使用javascript'.我仍然希望找到一个根本不需要JS的解决方案,或者最糟糕的是只将它用作CSS功能不起作用的后备.因此,我将在这个问题上发布一个赏金,关于有人在某个地方找到答案的机会.
[编辑]
更新:Firefox已进入快速开发模式,但尽管现在正在发布FF5,但仍不支持此功能.现在大多数用户已从FF3.6升级,黑客不再是解决方案.好消息我被告知它可能会被添加到Firefox 6中,而新版本的发布时间表应该会在几个月内完成.如果是这样,那么我想我可以等一下,但遗憾的是他们不能早点排序.
[最终编辑]
我看到省略号功能最终被添加到Firefox的"Aurora频道"(即开发版).这意味着它现在应该作为Firefox 7的一部分发布,它将于2011年底发布.真是令人宽慰.
可在此处获取发行说明:https://developer.mozilla.org/en-US/Firefox/Releases/7
我似乎偶然发现IE中的一个错误,其中scrollWidth与offsetWidth相比偏离了1px.对此的触发器似乎取决于元素中文本/字符的长度,并且只有当溢出设置为除可见之外的其他内容时才会发生.
有关我为什么要相互检查它们的上下文,请参阅以下问题:HTML - 如何在省略号激活时显示工具提示
有关此问题的示例,请参阅:http://jsfiddle.net/w5cwhjbf/2/
.base{
font-size: 16px;
overflow: hidden;
}
.wrapper{
float: left;
}<div class="wrapper">
<div id="div1" class="base">
Why is my scrollWidth wrong in IE?
</div>
</div>
<br style="clear: both;">
<br>
<button id="btn1" onclick="fnCheckScroll(div1,btn1)">Calculates Wrong</button>
<br>
<br>
<br>
<div class="wrapper">
<div id="div2" class="base">
Why is my scrollWidth right in IE?
</div>
</div>
<br style="clear: both;">
<br>
<button id="btn2" onclick="fnCheckScroll(div2,btn2)">Calculates Correctly</button>
<br>
<br>
<br>
Issue seems to be based on the character widths/font size resulting …我有下一个div:
<div class="div-class" style="width:158px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;" title=<%=myDesc%>
如何在省略号处于活动状态时显示工具提示？
我找到了这个功能
function isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}
但我不知道如何使用它知道我使用jsp和struts