Question

我正在开发一款带有旧Gecko引擎的电视应用程序（我认为是1.9）。我有一个250x40的容器，我想在其中插入 2行文本，如果它太长则应显示省略号（就像在CSS3属性text-overflow: ellipsis中一样）

然而： - 我不能使用CSS3， - 我尝试使用一些jQuery插件，但它们的工作速度太慢 - 你可以准确地看到文本缩小，直到它适合容器。

我尝试计算字母，但它不起作用，因为它们都是不同的宽度。我尝试将每个字母映射到它的宽度，并计算整个文本的宽度，但事实上它是2行将它全部搞砸了 - 我不知道文本将在哪一点进入下一行。

任何帮助表示感谢。

Answer 1

稍微基于@Emissary的回答，这里有一对合理执行的jQuery插件，可以处理可能包含多行文本的元素的省略号：

(function($) {

    $.fn.reflow = function() {
        return this.each(function() {

            var $this = $(this);
            var $parent = $this.parent();
            var text = $this.data('reflow');
            $this.text(text);               // try full text again

            var words = text.split(' ');
            while ($this.height() > $parent.height() ||
                   $this.width() > $parent.width()) {
                words.pop();
                $this.html(words.join(' ') + '&hellip;');
            }
        });
    }

    $.fn.overflow = function() {
        return this.each(function() {
            var $this = $(this);
            var text = $this.text();
            $this.data('reflow', text);
        }).reflow();
    }

})(jQuery);

后者注册用于回流的元素，第一个实际上完成了工作。分割是为了允许窗口大小调整以自动重新格式化元素的（原始）内容，例如：

$('.overflow').overflow();
$(window).on('resize', function() {
    $('.overflow').reflow();
});

为了获得更高的性能，如果重要，您可以考虑将.pop序列替换为使用O(log n)二进制分区算法的内容，以找到最佳切割点，而不是一次只删除一个字

请参阅http://jsfiddle.net/alnitak/vyth5/

Answer 2

这里的这个章节有一个使用javascript而不是JQuery的解决方案：http://blog.mastykarz.nl/measuring-the-length-of-a-string-in-pixels-using-javascript/

在jsfiddle中完成：http://jsfiddle.net/ZfDYG/

编辑 - 只需阅读大约2行文字： http://jsfiddle.net/ZfDYG/8/

代码（完整性）：

String.prototype.visualLength = function() {
  var ruler = $("ruler");
  ruler.innerHTML = this;
  return ruler.offsetWidth;
}
function $(id) {
  return document.getElementById(id);
}
var s = "Some text that is quite long and probably too long to fit in the box";
var len = s.visualLength();

String.prototype.trimToPx = function(length,postfix) {
  postfix = postfix || '';
  var tmp = this;
  var trimmed = this;
  if (tmp.visualLength() > length) {
    trimmed += postfix;
    while (trimmed.visualLength() > length) {
      tmp = tmp.substring(0, tmp.length-1);
      trimmed = tmp + postfix;
    }
  }

  return trimmed;
}
String.prototype.wrapToLength = function(complete) {
  if(complete[this.length] == ' ' || complete[this.length - 1] == ' ') return;

  var wrapped = this;
  var found = false;
  for(var i = this.length-1; i > 0 && !found; i--) {
    if(this[i] == ' ') { 
      wrapped = this.substring(0, i); 
      found = true; 
    }
  }
  return wrapped;
}
var firstLine = s.trimToPx(240).wrapToLength(s);
var secondLine = s.substring(firstLine.length, s.length);
$('output').innerHTML= firstLine+' '+secondLine.trimToPx(240,'...');

HTML：

<span id="ruler"></span>
<div id="output"></div>

的CSS：

#ruler { visibility: hidden; white-space: nowrap; }
#output { 
  width: 240px;
  height: 50px;
  border: 1px solid red;
}

如果你的盒子上的速度仍然太慢，我想应该可以加速while循环，从更大的加法开始向最终长度振动（有点像弹簧），而不是慢慢增加到它。

Answer 3

已经有一段时间以来我一直在支持旧浏览器，但这就是我一直这样做的方式。应该指出它修剪单词而不是字符，我总是认为半个单词看起来很愚蠢 - 如果你关心排版......

HTML：

<div id="el">
    <span class="overflow">Lorem ipsum dolor sit amet</span>
</div>

的CSS：

#el { 
    width: 250px;
    height: 40px;
    overflow: hidden;
}
.overflow {
    white-space: nowrap;
}

js / jQuery：

var el = $('#el'),
    ov = $('#el .overflow'),
    w = el.text().split(' ');
while(ov.width() > el.width()){ 
    w.pop();     
    ov.html( w.join(' ') + '&hellip;' );
}

jsFiddle

自动换行：没有CSS的省略号

3 个答案:

HTML：

的CSS：

js / jQuery：