jQuery dotdotdot plugin not working

Question

I am trying to show list of comments in a panel using dotdotdot plugin but result is not cheering:

From below xhtml code:

<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>

And below js code:

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

If I resolve the overflowing issue I could solve vertical size issue maybe but something is not correct about dotdotdot I guess. Let me show you one more weird thing:

As you can see, it seems div(wrapper) width value calculated correctly but text is keep overflowing. What can be the reason?

Thanks for helping.

Answer 1

Try this

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

Answer 2

I had a similar problem, and eventually I dropped this plugin and started using this CSS:

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

To get it work, you must define width.