2

jquery.dotdotdot を使用して、テキストのセクションにもっと読む/もっと読むリンクを作成しています。複数の p タグがあるセクションのテキストが表示されません。問題が何であるかはよくわかりません。以下のフィドルにコードを含めました。

どんな助けにも感謝します！ありがとう！

ここで完全なコードを表示

$(function () {
    var addLink = $('.securetext');
        addLink.append('<span class="readmore trigger-js">&nbsp;<a >Read more</a></span>');
        for (i = 0; i < addLink.length; i++) {
            if ($(addLink[i]).children("p").length > 0) {
                $(addLink[i]).children("p").last().append('<span class="readless trigger-js">&nbsp;<a >Read less</a></span>');
            } else {
                $(addLink[i]).append('<span class="readless trigger-js">&nbsp;<a >Read less</a></span>');
            }
        }
        truncateIfNeeded(); // Initialize ellipsis
    });

var truncateIfNeeded = function (jqueryTag) {
    var $selectionToTruncate = jqueryTag || $('.securetext');

    $selectionToTruncate.dotdotdot({
        ellipsis: '... ',
        watch: true,
        //wrap    : 'letter',
        height: 20 * 3, // max number of lines
        after: '.readmore',
        callback: function (isTruncated, orgContent) {
            var $currentReadMore = $(this).find('.readmore');
            var $currentReadLess = $(this).find('.readless');

            if (isTruncated) {
                $(this).addClass('securetext--is-truncated');
                $(this).removeClass('securetext--is-not-truncated');
            }
            bindReadMore(); // bind click on "read more"
        }
    });
};
4

1 に答える 1

0

問題は、切り捨てに使用されるアルゴリズムにあります。

最初の反復では、Read More...リンクは段落の後に追加されます (たまたまちょうど 3 行の長さです)。これは、切り捨てロジックが呼び出されることを意味します。

2 回目の反復では、Read More...が段落内に追加されます。全体が 3 行に収まるので、削除されます。これは明らかにバグです。

GitHub のバグを説明する問題は、 wontfixとしてクローズされました。

このプル リクエストは部分的な修正を提供しますが、要素が段落間で切り捨てられた場合、省略記号は表示されません。（ただし、続きを読むリンクは表示されます。）

于 2015-04-20T06:22:29.520 に答える