paragraph ellipses logic , how to display the ellipses at the end of P

Question

the ellipsis(...) at the end of the lines as i know should appear if that text larger than the size of paragraph ! is there any thing wrong with this code ?/ why the ellipses is not appear !

    #footer-section-1 p{

           outline: red solid 1px;
           width: 110px;
           height:60px;
           overflow: hidden;
           text-overflow: ellipsis;

    }

<section id="footer-section-1">
  
  <p> This text it too  long for me and i cant handle it right in this place! thank you  for trying  </p>
  
  
  </section>

xt in this pargraph the eliipses (...) shold appe

if i do so , the paragraph will look like one line and that was not my case , i need the paragraph to be there also (multi lines) — Mvrk, Nov 09 '14 at 18:52

score 1 · Answer 1 · edited May 23 '17 at 10:26

1

Please see this question for the correct use (which indicates that you require white-space: nowrap;). However, for webkit engines you can use the following in some cases:

#footer-section-1 {
           outline: red solid 1px;
           width: 110px;
           height:55px;
 
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  
}

<section id="footer-section-1">
  
This text it too  long for me and i cant handle it right in this place! thank you  for trying
  
  
  </section>

edited May 23 '17 at 10:26

Community

1
1

answered Nov 09 '14 at 19:11

Paul

8,974
3
28
48

Although the "line-clamp" does work, it's limited to webkit browsers (Chrome/Safari). I don't think there's a universal way to accomplish this without javascript. Interesting article here: http://html5hub.com/ellipse-my-text/ – ben.kaminski Nov 09 '14 at 19:12

ben.kaminski · Answer 2 · 2014-11-09T20:12:36.497

So my attempt includes some simple JS to help with the problem. The only drawback being that you have to dictate to the JS how many characters you want to allow in the area before the ellipsis appear (var len= x;):

The CSS for "text-overflow: ellipses;" only seems to work INLINE across all browsers. Once you cross multiple lines that declaration fails. This is why I think JS is necessary.

var len = 55;
var p = document.getElementById('footer-section-1');
if (p) {
  var trunc = p.innerHTML;
  if (trunc.length > len) {
    trunc = trunc.substring(0, len);
    trunc += '...';
    p.innerHTML = trunc;
  }
}

#footer-section-1 p{
outline: red solid 1px;
width: 110px;
height:60px;
overflow: hidden;
}

<section id="footer-section-1">
<p> This text it too  long for me and i cant handle it right in this place! thank you  for trying</p>
</section>

paragraph ellipses logic , how to display the ellipses at the end of P

2 Answers2