4

我正在尝试使用 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 有一些不正确的地方。让我告诉你一件更奇怪的事情：

dotdot2

如您所见，似乎 div(wrapper) 宽度值计算正确，但文本不断溢出。可能是什么原因？

感谢您的帮助。

4

6 回答 6

5

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

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

要使其工作，您必须定义width.

于 2013-07-31T18:32:34.950 回答
5

尝试这个

div#wrapper{
   word-wrap: break-word;
}
于 2013-04-13T18:42:55.507 回答
2

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

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

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

于 2013-04-13T18:51:44.800 回答
1

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

正如您在评论中所说，您有一个带有position: absolute, 的容器，它将破坏dotdotdot。

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

于 2013-04-13T19:11:02.850 回答
1

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

于 2015-09-03T23:47:40.090 回答
0

如果您指定字母级换行， dotdotdot.js确实声称支持您所描述的字母级换行/中断：

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

但是，实现似乎有问题。你可能需要不止一个词才能让它发挥作用。看这个例子：

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

于 2015-01-13T20:11:18.783 回答