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="#{CommentmentAuthorName}: " 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="#{CommentauthorId}"/>
    </h:link>

    <div id="wrapper">
        #{CommentmentText}
    </div>
    <br></br>
    <abbr class="timeago" title="#{CommentmentDate}"
          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.

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.

• javascript
• jquery
• css
• xhtml
• dotdotdot

• There's nothing wrong with dotdotdot, as I have been used it in multiple enterprise solutions without issue. Please post your CSS – Zachary Kniebel Commented Apr 13, 2013 at 18:43
• I am sure there is nothing wrong with the plugin's itself and it's clear to understand sth. wrong with my implementation that's why asked it. And there is not any relevant CSS except position values. – Ömer Faruk Almalı Commented Apr 13, 2013 at 18:57
• 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, 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. – Zachary Kniebel Commented Apr 13, 2013 at 19:00
• I see, div id=wrapper has a container div which I've mentioned as a panel and can be seen in the picture as a main container of all comments and it has position:absolute which can corrupt the dotdotdot. You can post this as an answer it will get my upvote. – Ömer Faruk Almalı Commented Apr 13, 2013 at 19:08
• @ZacharyKniebel - any idea why dotdotdot doesn't work with the 3 carousel? stackoverflow.com/questions/24375304/… – Vee Commented Jun 24, 2014 at 2:32

6 Answers 6

Try this

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

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.

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/

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.

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.

dotdotdot.js does claim to support letter-level wrapping/breaking as you describe, if you specify letter-level wrapping:

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

However, the implementation seems buggy. You may need to have more than one word for it to work. See this example:

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