javascript - 确定扩展文本是否会超过最大宽度/导致省略号显示？

Question

我想确定一段文本是否被 chop/显示省略号，以便我可以有条件地添加 [more]链接在它之后。

这是我正在使用的 CSS:

.more-text-collapse {
    display:inline-block;
    max-width:400px;
    height:1.2em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

我将其应用于 <div> .当里面的文本超过 400px 时，它会在末尾显示一个省略号。在那种情况下，我想添加一个 [more]链接以展开文本。

如何确定是否需要显示链接？

example fiddle

Answer 1

根据 this answer ，这里是代码:

$.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 elmW = $('.more-text').width(),
    txtW = $('.more-text').textWidth();
if(elmW < txtW) $('.more-text').after('[more]');

http://jsfiddle.net/Sergiu/EvD3J/1/