有一个website I frequent and have a casual amount of involvement,必须在固定的空间内显示这样的值表:
Foo-Bar-Baz-1.2.4.6
在这样的字符串中,最重要的部分不是最左边的部分,而是末端。
例如,
Foo-Bar-Baz-Bar-Baz-1.2.4.6
Foo-Bar-Baz-Bar-Quux-1.4.5.5
将这些溢出为:
Foo-Bar-Baz-…
Foo-Bar-Baz-…
会很糟糕,因为它隐藏了最重要的部分。
所以相反,有一些Javascript在游戏中计算文本的宽度(按比例宽度字体)并使其更像:
Foo-…-Baz-1.2.4.6
Foo-…Quux-1.4.5.5
<td class="name">
<strong>
<a href="/release/App-TimeTracker-Command-Category"
class="ellipsis"
title="DOMM/App-TimeTracker-Command-Category-1.001">App-TimeTracker-Command-Category-1.001</a>
</strong>
</td>
$.fn.textWidth = function() {
var html_org = $(this).html();
var html_calc = '<span>' + html_org + '</span>';
$(this).html(html_calc);
var width = $(this).find('span:first').width();
$(this).html(html_org);
return width;
};
var items = $('.ellipsis');
for (var i = 0; i < items.length; i++) {
var element = $(items[i]);
var boxWidth = element.width();
var textWidth = element.textWidth();
if (textWidth <= boxWidth) continue;
var text = element.text();
var textLength = text.length;
var parts = [text.substr(0, Math.floor(textLength / 2)), text.substr(Math.floor(textLength / 2), textLength)];
# iteratively elide middle chunks
# until you kill enough to fit
while (element.textWidth() > boxWidth) {
if (textLength % 2) {
parts[0] = parts[0].substr(0, parts[0].length - 1);
} else {
parts[1] = parts[1].substr(1, parts[1].length);
}
textLength--;
element.html(parts.join('…'));
}
}
缺点是速度非常慢,每次调用.textWidth()
触发两者 CSS刷新和布局重排,所以这个简单的循环可以在加载过程中轻松占所有页面CPU活动的85%。
在这里你可以看到那些小红色和紫色的斑点是浏览器疯狂解析HTML,应用CSS并反复回页。
缺点是这项工作可以完成的唯一地方是客户端,因为能够知道是否需要折叠,(以及适当和最佳折叠位置在哪里)取决于由于比例宽度字体的荣耀,显示设备上的字体渲染动态显着。
我希望在这里使用CSS3 text-overflow:
,但如前所述,它会产生隐藏最重要数据的不良副作用。
(我正在考虑看看是否可以通过二分搜索完成“找到休息”,但我不相信它会解决狮子会在性能问题中所占的份额)