dotdotdot add ellipsis even when not truncated

Question

I use dotdotdot to truncate text in height specified box

<div class="product-description dotdotdot" style="word-wrap: break-word;">
    <div class="product-description-icon">
        <span>
            <img src="product_gloves.png" alt="Gloves">
        </span>
    </div>
    <h4>Gloves</h4>
    <p>Some gloves text...</p>
</div>

jQuery :

$(".product-description.dotdotdot").dotdotdot({
    watch: true
});

My product-description dotdotdot have a min-height of 100px, and the text have the ellipsis at the end, but the text is not truncated and there is still a lot of free space.

Thank you for your help

Is there a reason you're using a jquery plugin for ellipses and not just using CSS? https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ — ntgCleaner, Jan 26 '16 at 18:47

score 1 · Accepted Answer · answered Jan 25 '16 at 22:28

I have downloaded dotdotdot and followed the README.md and it is working fine (except on $(window).resize).

You might need to provide more context with your question:

Are you including all the necessary .js files in the <head> of your markup and in the right order?
Is your jQuery wrapped in a $(document).ready(function() { your script });

I haven't looked in depth at the dotdotdot script yet. Mine is firing using exactly this script:

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

At a glance I am wondering if your choice of class name .dotdotdot might be causing issues. Perhaps rename your class(es) to read .product-description-wrapper and run the script on that class.

Hope this helps you

score 0 · Answer 2 · answered Jan 27 '16 at 12:45

I would use a pure CSS3 approach instead of jQuery.

Here are two of my favorite SASS mixins to achieve both word-wrapping or an ellipsis;

@mixin word-wrap() {
  word-break:     break-word;
  -webkit-hyphens: auto;
  -moz-hyphens:    auto;
  hyphens:         auto;
}

@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

dotdotdot add ellipsis even when not truncated

2 Answers2