javascript - Dynamically changing -line-clamp - Stack Overflow

admin管理员组

文章数量:1406914

I'm enlarging an element and attempting to change the -webkit-line-clamp. It works in that it shows the right amount of lines after the change, but it doesn't work in that the ellipsis and link (after text) don't move to the (new) end.

View CodePen

If you click the "Make it Big" button, you'll see what I mean.

How Can I make it so that the ellipsis and link get pushed to the end after changing the -webkit-line-clamp?

HTML:

<div class="api-family-tile-description">
  A bunch of text <a href="/someplace">View&nbsp;more&nbsp;&gt;</a>
</div>

CSS:

.api-family-tile-description {
  padding: 10px 10px 0 10px;
  height: 108px;
  display: block;
  line-height: 18px;
  display: -webkit-box;
  margin: 0 auto 10px;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

JS:

var lineheight = 18;
var lines = 14;
$(".api-family-tile-description").css({
    height: (lineheight*lines)+"px",
    "-webkit-line-clamp": lines
});

I'm enlarging an element and attempting to change the -webkit-line-clamp. It works in that it shows the right amount of lines after the change, but it doesn't work in that the ellipsis and link (after text) don't move to the (new) end.

View CodePen

If you click the "Make it Big" button, you'll see what I mean.

How Can I make it so that the ellipsis and link get pushed to the end after changing the -webkit-line-clamp?

HTML:

<div class="api-family-tile-description">
  A bunch of text <a href="/someplace">View&nbsp;more&nbsp;&gt;</a>
</div>

CSS:

.api-family-tile-description {
  padding: 10px 10px 0 10px;
  height: 108px;
  display: block;
  line-height: 18px;
  display: -webkit-box;
  margin: 0 auto 10px;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

JS:

var lineheight = 18;
var lines = 14;
$(".api-family-tile-description").css({
    height: (lineheight*lines)+"px",
    "-webkit-line-clamp": lines
});

• javascript
• html
• css

Share Improve this question Follow edited Aug 15, 2015 at 11:48 sergdenisov 8,58299 gold badges5151 silver badges6666 bronze badges asked May 15, 2015 at 20:53 SmernSmern 19.1k2222 gold badges7777 silver badges9393 bronze badges 1

• Here's how to change line-clamp dynamically - codepen.io/vsync/pen/QNxeVQ – vsync Commented Dec 22, 2021 at 7:34

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Try this — http://codepen.io/sergdenisov/pen/ZGOEdz:

$(".api-family-tile-description").css({
    height: (lineheight*lines)+"px",
    "-webkit-line-clamp": lines.toString()
});

From http://api.jquery./css/:

When a number is passed as the value, jQuery will convert it to a string and add px to the end of that string. If the property requires units other than px, convert the value to a string and add the appropriate units before calling the method.

本文标签： javascriptDynamically changing lineclampStack Overflow