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

Question

我有一个宽度固定的 html div。我想在里面放一些文本内容。如果文本太长，我想截断文本。但是，与text-overflow: ellipsis财产不同，我想在中间截断。我想听听你有什么有趣的想法。

Answer 1

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

这个jsfiddle 示例是一个粗略的实现。它一次缩小一个字符的值（可以很容易地改进），直到大小+省略号小于容器宽度

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>​

一般概念是实用的，但性能不是很好，特别是如果您在页面上有很多这些值。

前

后

改善这一点的一些额外考虑因素是

• 按单词而不是字符修剪，以便单词不会被分开
• 添加一些基本猜测以更快地修剪值（例如：文本宽度为 1000，容器只有 100，可以相当容易地切掉约 80% 的值并从那里一次修剪一个）
• 在 div 上设置 title 属性，以便悬停工具提示仍显示完整值

Answer 2

之前在 SO 上已经问过这个问题。也许我在这里的回答提供了更多线索？

Answer 3

您可以使用 .substring 来执行此操作。假设您的宽度可以容纳 10 个字符加上省略号，您可以执行以下操作：

var myText = "This is a sentence that needs to be reduced";

myText = myText.substring(0,5) + "..." + myText.substring(myText.length-5);