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.