CODEWITHSUNDEEP
javascriptjqueryhtmltext
user1235794
user1235794

Reputation: 11

Show certain count fo line in <div> tag

How can I show for example only 2 lines (not the 1st and the 2nd lines) of the text in such div using jQuery or JavaScript. Also I need to control text length and cut it if its too long

<div class="introtext">
    first first first firstfirstfirst<br>
    second second second second second second second<br>
    third third third third third<br>
    <br>
    fifth fifth fifth fifth fifth fifth fifth
</div>

This markup was generated and it should show only n lines of text in this div

I want to see something like this:

first first first 
firstfirstfirst second seco...

And markup like this:

 <div class="introtext">first first first firstfirstfirst second seco...</div>

Upvotes: 1

Views: 226

Answers (4)

pvgoran
pvgoran

Reputation: 460

You can also remove the lines that you don't need from DOM, using jquery:

var $secondBr = $(".introtext > br:nth-of-type(2)");
var $children = $(".introtext").contents();
var index = $children.index($secondBr);
$children.slice(index).remove();

This finds the second <br> element in the text, determines its index among all of container's children, and then removes all children starting from this element.

Upvotes: 0

n1kkou
n1kkou

Reputation: 3142

Add a css class with jquery : http://jsfiddle.net/K3aJ3/

Upvotes: 0

ArtoAle
ArtoAle

Reputation: 2977

If you only want to remove the line after n you can try this:

var element = document.querySelector('.introtext')
var content = element.innerHTML;
var lines = content.split('<br>');
lines.length = 2;
content = lines.join('<br>');
element.innerHTML = content;

See this fiddle

Upvotes: 1

web-tiki
web-tiki

Reputation: 103810

you could use css :

.introtext{
line-height:15px;
height:30px;
overflow:hidden;
}

FIDDLE

Upvotes: 1

Related Questions