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

【问题标题】：What is the smartest way of doing middle truncation when div width is fixed?当 div 宽度固定时，最聪明的中间截断方法是什么？
【发布时间】：2012-07-24 18:25:13
【问题描述】：

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

【问题讨论】：

这将是切除。从结尾截断。
你想分割单词（如果合适的话）还是只分割字符？

标签： javascript html css

【解决方案1】：

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

这个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>

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

之前

之后

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

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

【讨论】：

我让它以类似的方式工作。但不是使用'excision-test' div。我只是在它自己的 div 上使用它。感谢您提供小提琴示例！

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

这个问题之前已经在 SO 上提出过。或许my answer here 能提供更多线索？

【讨论】：