dotdotdot add ellipsis even when not truncated

Question

dotdotdot add ellipsis even when not truncated

716 Views Asked by Mistraë At 14 January 2016 at 09:29

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

Original Q&A

There are 2 best solutions below

Kapeesh Manilal On 27 January 2016 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;
}

**DanMad** · Accepted Answer · 2016-01-25T22:28:40.953000

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

dotdotdot add ellipsis even when not truncated

There are 2 best solutions below

Related Questions in DOTDOTDOT

Trending Questions

Popular # Hahtags

Popular Questions