3

テキストのブロックが切り捨てられているか、省略記号が表示されているかどうかを判断して、条件付きで[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]そのシナリオでは、テキストを展開するためのリンクを追加したいと考えています。

リンクを表示する必要があるかどうかを判断するにはどうすればよいですか?

フィドルの例

4

2 に答える 2

2

この答えによると、ここにコードがあります：

$.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/

于 2013-02-08T01:02:10.517 に答える
0

これらのスタイルを使用して、やりたいことができるようです。

.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から幅を完全に取り除くことができるので、1か所で定義するだけで済みます。

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');
    }
});

拡大するテキストをアニメーション化できたらいいのにと思います...

于 2013-02-08T00:49:31.427 に答える