文本溢出的高效Infix替代方案？

Question

有一个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:，但如前所述，它会产生隐藏最重要数据的不良副作用。

（我正在考虑看看是否可以通过二分搜索完成“找到休息”，但我不相信它会解决狮子会在性能问题中所占的份额）