段落省略号逻辑，如何在P末尾显示省略号

Question

据我所知，如果文本大于段落的大小，则应在行末显示省略号（…）！这个代码有什么问题吗？/为什么椭圆没有出现

    #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在这个pargraph中，eliipses（…）将出现

Answer 1

请参阅此问题以获得正确的用法（这表示您需要white-space: nowrap;）。然而，对于webkit引擎，您可以在某些情况下使用以下内容：

#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>

Answer 2

所以我的尝试包括一些简单的JS来帮助解决这个问题。唯一的缺点是，在省略号出现之前，您必须向JS指定您希望在区域中允许多少个字符（var len=x；）：

"文本溢出：省略号；"的CSS似乎只适用于所有浏览器的INLINE。一旦跨越多行，声明就会失败。这就是为什么我认为JS是必要的。

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>