How can I change webkit css with jquery

Question

This doesn't change it. I don't know why

$("#description").animate({"-webkit-line-clamp":8},500);
console.log($("#description").css("-webkit-line-clamp"))//returns 3

I have also tried

 $("#description").animate({"-webkit-line-clamp":"8"},500);

at least $("#description").css({"-webkit-line-clamp":"8"}); works. But it's probably a non-animating property, that's why? — Samuli Hakoniemi
– Samuli Hakoniemi, Commented Oct 31, 2014 at 12:02

A. Wolff · Accepted Answer · 2014-10-31 12:42:41Z

3

Here an example how you could animate it:

$("#description").animate({
    webkitLineClamp: 8
}, {
    duration: 5000,
    step: function (v) {
        $(this).css({webkitLineClamp: parseInt(v,10).toString()});
    }
})

 body {
    padding: 20px;
    font: 1.2em/1.2em'Open Sans', sans-serif;
}
.module {
    width: 250px;
    margin: 0 0 1em 0;
    overflow: hidden;
}
.module p {
    margin: 0;
}
.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Line Clampin'</h1>




<div id="description" class="module line-clamp">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

edited Oct 31, 2014 at 12:42

answered Oct 31, 2014 at 12:14

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ekimas Over a year ago

I just used simple $("#description").animate({ webkitLineClamp: 8 })

Ian Wood · Accepted Answer · 2014-10-31 12:03:35Z

2

This page seems to suggest you need display: -webkit-box;

$("#description").css({"display":"-webkit-box"}).animate({"-webkit-line-clamp":8},500);

It also offers up a few alternatives - Clamp.js may offer you a more 'unversal' solution albeit pure JS implementation - but you seem to be going down that route anyway.

answered Oct 31, 2014 at 12:03

Ian Wood

6,5736 gold badges36 silver badges75 bronze badges

Collectives™ on Stack Overflow

How can I change webkit css with jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related