javascript - 当 div 宽度固定时，最聪明的中间 chop 方法是什么？

Question

我有一个宽度固定的 html div。我想在里面放一些文字内容。如果文本太长，我想 chop 文本。但是，与 text-overflow: ellipsis 属性不同，我希望在中间进行 chop 。我想听听你有什么有趣的想法。

Answer 1

您可以使用“测试”div 来确定您的值的大小，并通过 trim 中间来调整它们的大小，直到它适合所需的宽度。

这jsfiddle example是一个粗略的实现。它一次缩小一个字符的值(这很容易改进)直到大小 + 省略号小于容器宽度

javascript/jQuery

// Text excision for generating middle ellipsis values to fit a specific size.

String.prototype.cutMiddleChar = function() {
    var charPosition = Math.floor(this.length / 2)
    return this.substr(0, charPosition) + this.substr(charPosition + 1);
};
String.prototype.insertMiddleEllipsis = function() {
    var charPosition = Math.floor(this.length / 2)
    return this.substr(0, charPosition) + '...' + this.substr(charPosition);
};

var w = 0,
    t = '',
    $test = $('.excision-test');

$('div').each(function() {
    // re-usable $this
    var $this = $(this);
    // get current width, this is the width we need to fit the value to
    w = $this.width();
    // get current text value, we'll be manipulating this till it's sized right
    t = $this.text();
    // set our test div to the value (plus our ellipsis) for sizing
    $test.text(t + '...');

    //console.log(w);
    //console.log($test.width());

    // when the value's width is greater than the width of the container loop through to size it down
    if ($test.width() > w) {
        while ($test.width() > w) {
            t = t.cutMiddleChar()
            //console.log('str cut: ' + t);
            $test.text(t + '...');
            //console.log('str len: ' + t.length);
            //console.log('width:   ' + $test.width());
        }
        $this.text(t.insertMiddleEllipsis());
    }
});​

CSS

/* manipulate font-family, font-size as needed */
body {font-family:arial;font-size:12px;}

/* div and test div must use same formatting (font-size, font-family, etc) */
div {width:300px;border:1px solid red}
.excision-test {position:absolute;left:-10000em;width:auto;}

HTML

<div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vel orci quis nunc vulputate tristique quis id tortor. Donec dui ante, condimentum quis iaculis ut, venenatis vel lorem. Etiam ullamcorper aliquam imperdiet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis tincidunt ligula lorem. Pellentesque pharetra ipsum nec erat tempor vel sagittis libero volutpat. Donec malesuada convallis pharetra.
</div>
<div class="excision-test"></div>​

一般概念是实用的，但性能不是很好，尤其是当页面上有很多这些值时。

之前

之后

改进这一点的一些额外注意事项是

• 按单词而不是字符进行 trim ，这样单词就不会被分割
• 添加一些基本猜测以更快地 trim 值(例如:文本宽度为 1000 而容器仅为 100，可以很容易地砍掉大约 80% 的值并从那里一次 trim 一个)
• 在 div 上设置 title 属性，这样悬停工具提示仍会显示完整值