Question

我想确定文本块是否被截断/显示省略号，以便我可以在其后有条件地添加[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/

Answer 2

看起来我可以使用这些样式做我想做的事情：

.more-text {
    line-height: 1.2em;
    display:none;
    white-space: nowrap;
}

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

.more-text-expand {
    display:inline;
    white-space: pre-wrap;
}

我给每个<divs>只给more-text类，让它们扩展到它们的全宽但隐藏它们以便它们不会破坏界面，然后我计算它们的宽度和覆盖类：

$('.more-text').each(function(i,el) {
    var width = $(this).width();
    $(this).addClass('more-text-collapse');
    if(width > 400) {
        $('<a>', {href:'#',class:'more-link'}).text('[more]').insertAfter(this);
    }
});

实际上，我们可以完全取出CSS的宽度，这样我们只需要在一个地方定义它：

var maxWidth = 400;
$('.more-text').each(function(i,el) {
    var width = $(this).width();
    if(width > maxWidth) {
        $(this).addClass('more-text-collapse').css('max-width',maxWidth);
        $('<a>', {href:'#',class:'more-link'}).text('[more]').insertAfter(this);
    } else {
        $(this).addClass('more-text-expand');
    }
});

如果我可以为文字扩展设置动画效果会很好......

确定扩展文本是否超出max-width / cause省略号显示？

2 个答案: