5

ウェブサイトの複数行の段落が特定の高さを超えたときに、それらに省略記号を追加しようとしています。この目的のために、jqueryプラグインであるdotdotdotを使用しています。

奇妙なことに、ページを更新しても機能しません。ウィンドウのサイズを変更した後にのみ機能します（その後、完全に機能します）。dotdotdotが最後に読み込まれるように、HTMLの最後にすべてのスクリプトを配置しようとしましたが、それでも正しく機能しません。なぜこれが起こるのか誰かが知っていますか？

dotdotdotに次の設定を使用しています。

$(document).ready(function() {
    $("p.article-content").dotdotdot(
    {
        /* The HTML to add as ellipsis. */
        ellipsis : '...',

        /* How to cut off the text/html: 'word'/'letter'/'children' */
        wrap : 'word',

        /* jQuery-selector for the element to keep and put after the ellipsis. */
        after : null,

        /* Whether to update the ellipsis: true/'window' */
        watch : true,

        /* Optionally set a max-height, if null, the height will be measured. */
        height : null,

        /* Deviation for the height-option. */
        tolerance : 0,

        /* Callback function that is fired after the ellipsis is added,
        receives two parameters: isTruncated(boolean), orgContent(string). */
        callback : function( isTruncated, orgContent ) {},

        lastCharacter : {
            /* Remove these characters from the end of the truncated text. */
            remove : [ ' ', ',', ';', '.', '!', '?' ],

            /* Don't add an ellipsis if this array contains
            the last character of the truncated text. */
            noEllipsis : []
        }
    });
});

関連するHTMLは次のとおりです（醜いです、私は知っています、私はまだそれを実験しています）：

<article class="article">
  <div class="article-image"></div>
  <h2>Title</h2>
  <p class="date">December 19, 2012</p>
  <p class="article-content">Lorem ipsum etc. (the actual content is larger)</p>
</article>

そしてCSS：

article {
  font-size: 99%;
  width: 28%;
  line-height: 1.5;
  float: left;
  margin-left: 8%;
  margin-bottom: 3em;
  text-align: justify;
}

article h2 {
  font-size: 125%;
  line-height: 0.5;
  text-transform: uppercase;
  font-weight: normal;
  text-align: left;
  color: rgba(0,0,0,0.65);
}

.date {
  margin-top: 0.3em;
  margin-bottom: 1em;
  font-family: 'PT Sans';
  color: rgba(0,0,0,0.5);
}

.article-image {
  background-image: url(http://lorempixel.com/g/400/300/city/7);
  width: 100%;
  height: 13em;
  overflow: hidden;
  margin-bottom: 1.5em;
}

p.article-content {
  font-family   : 'PT Sans';
  color         : rgba(0,0,0,0.65);
  margin-bottom : 0;
  height        : 7em;
  overflow      : hidden;
}
4

4 に答える 4

3

同様の問題がありました。dotdotdotの初期化を、domreadyではなくウィンドウロードイベントハンドラーに配置する必要がありました。

于 2013-06-25T10:02:56.740 に答える
3

最初は、dotdotdotでとても簡単に見えました。しかし、多くのコンテンツを含むレスポンシブページでもこの問題が発生しました。ドキュメントの準備ができた後も、コンテンツが入力されているため、ページ上のコンテナのサイズは変更されています。コメントを使用すると、私の解決策は次のようになります。

$(document).ready(ellipsizeText);        // Plugin must have been working flawles inhere as described in documentation.
window.setTimeout(ellipsizeText, 400);   // Just for any case.
window.setTimeout(ellipsizeText, 800);   // Maybe user didn't saw it flickering.
$(window).load(ellipsizeText);           // Oh hell! the images are loading so not all containers are yet on their places. We wait on them..
function ellipsizeText()
{
    $(".selectorForEllipsis").dotdotdot({
        watch: true
    });
}

適切な解決策は、ウィンドウのサイズ変更だけでなく、dotdotdotを更新するために位置またはサイズが変更されたときに、テキストを含むすべてのコンテナーにリスナーを追加することだと思います。多分ベンアルマンyqueryサイズ変更プラグインで

または、このコンテンツの読み込みの問題をより適切に処理するプラグインが存在しますか？

于 2014-08-28T12:50:16.533 に答える
0

または、関数全体を関数の下にラップするだけ.resize()です。最も洗練されたソリューションではありませんが、機能します。

$(document).ready(function() {
    $(window).resize(function()
    {
        $("p.article-content").dotdotdot(
        {
            // All your code goes here
        });
    }).resize();

    // The second .resize() will fire when the document is ready (i.e. onload),
    // therefore executing .dotdotdot() upon loading
});

[編集]：Kevinの提案によると、.dotdotdot()すでにサイズ変更イベントをリッスンしているので、関数をラップする必要さえありません。を使用して、ドキュメントの準備ができたらイベントをトリガーするだけ$(window).resize()です。

于 2013-03-08T20:13:53.280 に答える
0

ウォッチ：「ウィンドウ」からウォッチ：trueに変更

そしてそれは私のために働き始めました！

于 2015-11-19T11:02:52.403 に答える