jquery ellipsis doesn't show dots at the end

Question

Jquery Ellipsis doesn't show three dots at the end.

HTML:

<div class="slidertext three_lines">SIA “Baltic Metolat” provides mechanical surface treatment, priming and painting of technical task. We are able to handle oversized items.</div>

JQuery:

jQuery('.three_lines').ellipsis({
    row: 3
});

CSS:

.slidertext {
    margin-left: 1px;
    margin-top: 10px;
    font-size: 12px;
    line-height: 20px;
    height: 58px;
    overflow: hidden;
    margin-bottom: 5px;
    width: 224px;
}

It shows only three lines, but it doesn't show dots at the end.

Live it could be seen here: http://www.metolat.lv/ (search fo text "provides mechanical surface").

Answer 1

That live example doesn't look like the text is getting shortened at all. It shows 3 lines because the fourth line is hidden due to a fixed height and hidden overflow of its container.

It looks like that Ellipsis plugin calculates whether a text element needs to be truncated by comparing its total height to the height of n (here, 3) lines. Since you have a fixed height set in CSS for that div, the plugin looks at it and says to itself "that element has a height less than or equal to the height of 3 lines of text" and so it doesn't do anything.

You are calling it correctly, though, and I see that it works on your title "Metal construction..."