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在本段中eliipses（...）shold appe

Answer 1

请参阅this question了解正确的用法（表明您需要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;）：

“text-overflow：ellipses;”的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>

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

2 个答案: