CODEWITHSUNDEEP
javascriptcss
user2333363
user2333363

Reputation: 217

Wrap a text within two lines in div

I wish to wrap a text with in only two lines inside div of especial width. If text goes beyond the length of two lines then i wish to show elipses. is there any solution to do that using CSS?

I used css property text-overflow:ellipsis. its works only for one line. and also i used -webkit-line-clamp:2.which works well in chrome and safari browsers. text wrap need to sopport in all the browsers(firefox and IE9).

Please suggest me the solution using css or javacsript?

Thanks in Advance.

One thing i observed.. if text fits in complete two lines its display like this.

testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte 
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte ...

suppose if text fits half of the two lines like

 testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte 
    testtesttesttesttest                                                               ...

I am expecting like below:

 testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttestte 
 testtesttest...

I have tried with some modifications didn't succeeded.

Upvotes: 0

Views: 1887

Answers (1)

dave
dave

Reputation: 64657

You could play around with something like this

p.ellipsis {
position:relative;
line-height:1em;
max-height:2em;      /* 2 times the line-height to show 2 lines */
overflow: hidden;
}
p.ellipsis::after {
content:"...";
font-weight:bold;
position:absolute;
top:1em;
right:0;
padding:0 20px 1px 10px;
background: white;
}

See fiddle: http://jsfiddle.net/T7B9c/

Or you could use clamp.js

Edit: To calculate if there is no overflow, you could do:

<p id="ellipsis">lots of text</p>

var $element = $('#ellipsis');
if( $element[0].offsetHeight < $element[0].scrollHeight || $element[0].offsetWidth < $element[0].scrollWidth){
   // your element have overflow
   $element.addClass('ellipsis');
}
else{
  $element.removeClass('ellipsis');
}

Then it will only show the dots if the element has stuff not shown.

Upvotes: 1

Related Questions