Text that get pushed down and truncated by amount of text above

Question

I want to accomplish something rather complex. I've made an image to explain it better:

1. The title text can be a maximum of 3 lines
2. The text below that can be a maximum of 5 lines
3. The text below should be longer or shorter, depended on the title text above it
4. If one of the texts is too long, the text should get truncated with ellipses

How do I accomplish this in HTML/CSS? I already found something for truncating with ellipses: http://jsfiddle.net/6hk8Ldq2/

  var p=$('#fos p');
    var divh=$('#fos').height();
    while ($(p).outerHeight()>divh) {
        $(p).text(function (index, text) {
            return text.replace(/\W*\s(\S)*$/, '...');
        });
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

If you want to add ellipses on multiline text then you have to use -webkit-line-clamp with number of line as a value (3, 4, 5) and also below styles.

text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical; 

I also have added jQuery code to calculate -webkit-line-clamp value dynamically.

See the Snippet below:

$(window).on('resize', resetHeight)

function resetHeight(){
  $(".fos").each(function(){
    $(this).find("p").height($(this).height() - $(this).find(".title").height() - 10);

    /*var lineheight = parseFloat($(this).find("p").css('line-height'));
    var scrollheight = parseFloat($(this).find("p").height()); 
    var calc = parseInt(scrollheight/lineheight) + 1;
    
    calc = (calc>5)?5:calc;*/
    
    
    var title=$(this).find(".title");
    var divh=$(this).find(".title").height()+10;
    
    while ($(title)[0].scrollHeight>divh) {
        $(title).text(function (index, text) {
            return text.replace(/\W*\s(\S)*$/, '...');
        });
    }
    
    
    $(this).find("p").addClass("p-overflow");
    //$(this).find("p").css({"-webkit-line-clamp": "" + calc + ""});
    var p=$(this).find("p");
    var divh=$(this).find("p").height()+10;
    
    while ($(p)[0].scrollHeight>divh) {
        $(p).text(function (index, text) {
            return text.replace(/\W*\s(\S)*$/, '...');
        });
    }
  });
}
$("#textHeight").change(function(){
	$(".fos").height($(this).val());
	$(".fos").css("max-height", $(this).val() + "px");
  //resetHeight();
});

resetHeight();

*{
  font-family: calibri;
}
.changeHeight{
  padding:10px 5px;
}
.fos-container{
  display: flex;
  flex-direction:row;
}
.fos {
  width: 220px; 
  min-height: 120px;
  max-height: 120px;
  overflow: hidden;
  background:#eee;
  padding:10px;
  font-family: calibri;
  margin:5px;
}
.fos .title{
  padding: 0 10px;
  max-height:58px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient: vertical; 
  overflow:hidden;
  font-weight:bold;
}
.fos p { 
  padding: 5px 10px;
  margin: 0;
  overflow:hidden;
  position:relative;
  line-height:19.5px;
}

.p-overflow {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="changeHeight">
  <label for="textHeight">Change .fos height: </label><input id="textHeight" name="textHeight" type="number" min="120" max="420" step="20" value="120"/>
</div>
<hr>
<div class="fos-container">

  <div class="fos">
    <div class="container">
      <div class="title">Lorem ipsum</div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit. Nullam venenatis, elit in suscipit imperdiet, orci purus posuere mauris, quis adipiscing ipsum urna ac quam.</p> 
    </div>
  </div>

  <div class="fos">
    <div class="container">
      <div class="title">Lorem ipsum dolor sit amet, consectetur</div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> 
    </div>
  </div>

  <div class="fos">
    <div class="container">
      <div class="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui</div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit. Nullam venenatis, elit in suscipit imperdiet, orci purus posuere mauris, quis adipiscing ipsum urna ac quam.</p> 
    </div>
  </div>

</div>

You can test it here also.

Update 1

Limit the text below to maximum 5 lines.

jsFiddle

Update 2

I have merged the original code to the solution so that it will work on Firefox as well.

jsFiddle