CODEWITHSUNDEEP
javascriptjquerycssxhtmldotdotdot
Ömer Faruk Almalı
Ömer Faruk Almalı

Reputation: 3822

jQuery dotdotdot plugin not working

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

comments

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:

dotdot2

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.

Upvotes: 4

Views: 15242

Answers (6)

gorodezkiy
gorodezkiy

Reputation: 3419

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.

Upvotes: 1

Jonathan Lidbeck
Jonathan Lidbeck

Reputation: 1614

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/

Upvotes: 0

MightyPork
MightyPork

Reputation: 18871

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.

Upvotes: 5

Zachary Kniebel
Zachary Kniebel

Reputation: 4774

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.

Upvotes: 1

ryanbrill
ryanbrill

Reputation: 2011

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/

Upvotes: 2

Adil Shaikh
Adil Shaikh

Reputation: 44740

Try this

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

Upvotes: 5

Related Questions