文本被下推并被上方的文本量截断

Question

我想完成一些相当复杂的事情。我已经制作了一张图片以更好地解释它：

1. 标题文字最多3行
2. 下面的文本最多可以包含5行
3. 下面的文本应该更长或更短，取决于上面的标题文本
4. 如果其中一个文本太长，则文本应被省略号省略

如何在HTML / CSS中完成此操作？ 我已经找到了一些用省略号来截断的内容：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

如果要在多行文本上添加省略号，则必须使用-webkit-line-clamp，并将行数作为值（3，4，5）以及下面的样式。

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

我还添加了jQuery代码以动态计算-webkit-line-clamp的值。

请参见下面的代码段

$(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>

您也可以here对其进行测试。

更新1

将下面的文本限制为最多5行。

jsFiddle

更新2

我已将原始代码合并到解决方案中，以便它也可以在Firefox上使用。

jsFiddle