Параграф логику эллипсов, как отображать эллипсы в конце 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 в этом параграфе Eliipses (...) Shold App

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>