javascript - dotdotdot.js 仅在调整窗口大小后有效

Question

当我的网站上的多个多行段落超过特定高度时，我试图将省略号附加到它们。为此，我正在使用 dotdotdot , jquery 插件。

奇怪的是，当我刷新页面时它不起作用。它仅在我调整窗口大小后才起作用(然后它就完美地工作了)。我已经尝试将所有脚本放在我的 html 的末尾，以便最后加载 dotdotdot，但它仍然无法正常工作。有谁知道为什么会这样？

我正在为 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;
}

Answer 1

遇到了类似的问题。只需将 dotdotdot 初始化放在窗口加载事件处理程序中，而不是准备好 dom。