CODEWITHSUNDEEP
dotdotdot
Mistraë
Mistraë

Reputation: 337

dotdotdot add ellipsis even when not truncated

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

Upvotes: 6

Views: 717

Answers (2)

Kapeesh Manilal
Kapeesh Manilal

Reputation: 104

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;
}

Upvotes: 0

DanMad
DanMad

Reputation: 1755

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

Upvotes: 1

Related Questions