jQuery dotdotdot插件无法正常工作

Question

我正在尝试使用dotdotdot插件在面板中显示评论列表，但结果并不欢呼：

从xhtml代码下面：

<li>
    <h:link value="#{Comment.commentAuthorName}: " id="goToProfileWithAuthorName"
            outcome="/profile.xhtml" type="submit"
            style="text-decoration:none;font-weight:bold;font-size: 11px;color: rgb(120,120,159);">
        <f:param name="userId" value="#{Comment.comauthorId}"/>
    </h:link>

    <div id="wrapper">
        #{Comment.commentText}
    </div>
    <br></br>
    <abbr class="timeago" title="#{Comment.commentDate}"
          style="color: #778899;font-size: 10px;">
    </abbr>

    <br/>
</li>

以下js代码：

$(document).ready(function() {
    $("#wrapper").dotdotdot({
        //  configuration goes here
    });
})

如果我解决了溢出的问题，我可以解决垂直尺寸问题，但我想猜测dotdotdot是不正确的。让我再向你展示一个奇怪的事情：

正如您所看到的，似乎div（包装器）宽度值正确计算但文本仍然溢出。可能是什么原因？

感谢您的帮助。

Answer 1

试试这个

div#wrapper{
   word-wrap: break-word;
}

Answer 2

我遇到了类似的问题，最终我删除了这个插件并开始使用这个CSS：

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

要使其正常运行，您必须定义width。

Answer 3

根据您的屏幕截图，我猜您有多个<div id="wrapper">。由于ID每页只应使用一次，因此插件可能无法正确迭代它们。尝试将其更改为类<div class="wrapper">并将JS更新为：

$(document).ready(function() {
    $(".wrapper").dotdotdot({
        //  configuration goes here
    });
})

链接到小提琴：http://jsfiddle.net/ryanbrill/RgHRs/

Answer 4

默认情况下，文本在其容器中包装。如果您的文本没有包装，则存在一些导致它的CSS，无论是直接（例如，white-space: nowrap）还是间接（例如，position: absolute）。如果必须显式设置CSS属性以恢复此默认行为，例如word-wrap: break-word，那么您必须具有一些已经影响文本的CSS属性，因为这不是默认要求。

正如您在评论中所述，您有一个position: absolute的容器，这将会中断dotdotdot。

您可以通过将元素包装在宽度设置为与容器相同宽度的另一个容器（在绝对定位的容器内）来解决此问题。

Answer 5

在我的情况下，dotdotdot不适用于元素，因为它们最初是不可见的，然后在选项卡选择后显示。所以我不得不将dotdotdot初始化移动到某个onTabShown事件。

Answer 6

dotdotdot.js 声称支持字母包装/中断，如果您指定字母级包装：

$('.my_elements').dotdotdot({ wrap: 'letter' });

然而，实施似乎有些错误。您可能需要有多个单词才能正常工作。见这个例子：

http://jsfiddle.net/pqz5b408/1/