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:

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.

There's nothing wrong with `dotdotdot`, as I have been used it in multiple enterprise solutions without issue. Please post your CSS — Zachary Kniebel, Apr 13 '13 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ı, Apr 13 '13 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, Apr 13 '13 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ı, Apr 13 '13 at 19:08
@ZacharyKniebel - any idea why dotdotdot doesn't work with the 3 carousel? http://stackoverflow.com/questions/24375304/jquery-dotdotdot-plugin-adds-ellipsis-not-working-with-bootstrap-carousel — Vee, Jun 24 '14 at 02:32

score 5 · Accepted Answer · answered Apr 13 '13 at 18:42

5

Try this

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

answered Apr 13 '13 at 18:42

Adil Shaikh

44,509
17
89
111

This did the trick thanks! But it still writes the comment under the comment author's name, what should I do to promt it to write comment right after the comment author's name like in Facebook? – Ömer Faruk Almalı Apr 13 '13 at 18:53
This really does not provide the same functionality as the plugin, though. Granted, it may be a better options in browsers that support it (IE7 does not – http://caniuse.com/#search=word-wrap) – ryanbrill Apr 13 '13 at 18:57
I have been trying everything I could to break off long words in css, ended up with javascript plugins and in the end I could solve it by only placing it in a div with word-wrap: break-word. This is excellent. – user2609980 Nov 22 '13 at 12:27

score 5 · Answer 2 · answered Jul 31 '13 at 18:32

5

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.

answered Jul 31 '13 at 18:32

MightyPork

18,270
10
79
133

1

I think this is the best solution. This does not increase the page load and CSS is the fastest way to do any kind of processing. – Daniel Luca CleanUnicorn Nov 30 '13 at 13:16
I second this as the best solution. Also appears to be well supported across browsers: http://caniuse.com/#search=text-overflow – siliconrockstar Jun 19 '14 at 01:07
2

Although this technically isn't an answer to the original question (as the question wants help getting the jquery.dotdotdot plugin to work. This definitely worked for me as I was unable to get the plugin to work. However the plugin (if you can get it to work) provides more flexibility than this simpler CSS solution. Either way, I marked this answer as useful because it so is. :) – Aaron Jul 07 '14 at 17:48
6

The problem with this solution is that it only works on a single line. Plugins like dotdotdot or autoellipsis should allow use of elliplsis for text on multiple lines. – algiogia Jan 19 '15 at 12:49

ryanbrill · Answer 3 · 2013-04-13T19:01:25.537

2

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/

edited Apr 13 '13 at 19:01

answered Apr 13 '13 at 18:51

ryanbrill

1,981
10
13

This sounds correct but didn't solve it, I am trying to figure out why. – Ömer Faruk Almalı Apr 13 '13 at 18:55
Also, just noticed I had the JS above wrong. Still had the selector pointed toward the ID. Try with the updated code above. – ryanbrill Apr 13 '13 at 19:02
1

Also worth noting: the functionality that you appear to be looking for (breaking a long string of text) doesn't seem to be supported by the plugin. See the last example on this fiddle: http://jsfiddle.net/ryanbrill/RgHRs/4/ – ryanbrill Apr 13 '13 at 19:05
Oh so, if a user enters a long string of text without using space letter, is text going to overflow? So there should be a plugin which covers these kind of issues right? – Ömer Faruk Almalı Apr 13 '13 at 19:11

score 1 · Answer 4 · answered Apr 13 '13 at 19:11

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.

score 1 · Answer 5 · answered Sep 03 '15 at 23:47

1

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.

answered Sep 03 '15 at 23:47

gorodezkiy

3,299
2
34
42

score 0 · Answer 6 · answered Jan 13 '15 at 20:11

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/

jQuery dotdotdot plugin not working

6 Answers6