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.

Solution 1

Try this

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

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

Solution 3

Based on your screenshot, I'm guessing you have more than one <div id="wrapper">. Since ID's should only be used once per page, the plugin is probably not iterating them correctly. Try changing it to a class <div class="wrapper"> and update the JS to:

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

Link to fiddle: http://jsfiddle.net/ryanbrill/RgHRs/

Solution 4

Text wraps within its container, by default. If your text is not wrapping then there exists some CSS that is causing it, be it directly (e.g., white-space: nowrap) or indirectly (e.g., position: absolute). If you must explicitly set a CSS property in order to restore this default behavior, like word-wrap: break-word, then you must have some CSS property that is already affecting your text, as this is not a default requirement.

As you have stated in your comments, you have a container with position: absolute, and that will break dotdotdot.

It is possible that you may be able to resolve this issue by wrapping the element in another container (within the absolutely positioned container) that has its width set to the same width as the container.

Solution 5

In my case dotdotdot didn't work for elements, because they were invisible initially and then were shown after tab select. So I had to move dotdotdot initialization to some onTabShown event.

View more solutions