3

I am trying to find a solution to an issue with text-overflow property. I have the following code: https://jsfiddle.net/2m8m3xyp/7/

.wrapper,
.wrapper p {
  font-size: 14px;
  line-height: 14px;
}
.wrapper {
  /* need 10 lines exactly so i go 10 x Line height */
  height: 140px;
  /* that's the width of my container */
  width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;

 /* visibity  */
  border: 1px solid red;
}

I have a div with class="wrapper" and nested

elements with text (unknown number of paragraphs and lines of text in each). I am trying to show maximum of 10 lines of text in that div.wrapper. I want to know if there is a way to set text-overflow: ellipsis on the parent element div.wrapper and if this won't work ever, is there another way to do it - JavaScript maybe?

yavor.vasilev
  • 259
  • 2
  • 9
  • [Limit text length to n lines using CSS](http://stackoverflow.com/q/3922739/1529630) would have been a better dupetarget. – Oriol Dec 13 '16 at 15:17
  • I already saw that post, and that's where I got the idea for calculating height of div from Line Height, but I am afraid however, that it doesn't fully answer my question. Moreover, the solutions that are there, do not involve nested elements. So I don't believe that this isn't "an exact duplicate".. – yavor.vasilev Dec 13 '16 at 15:38
  • Run this http://stackoverflow.com/questions/783899/how-can-i-count-text-lines-inside-an-dom-element-can-i when your text is done loading. if text >10, show 10 hide the rest. – Иво Недев Jan 13 '17 at 09:00

0 Answers0