Вставить эллипс после определенного количества строк

Я пытаюсь отобразить только первые 5 строк текста. Проблема в том, что способ настройки текста - это несколько тегов <p> в div, например

<div class="myText">
  <p>some text</p>
  <p>some text</p>
  <p>some text</p>
  <p>some text</p>
  <p>some text</p>
  <p>some text</p>
  <p>some text</p>
</div>

Я просмотрел много ответов на этом сайте, таких как этот, и этот и в в других местах, таких как http://codepen.io/martinwolf/pen/qlFdp и https://css-tricks.com/line-clampin/, но ни один из них не работает для этого случая, где мне понадобится эллипсис после последнего слова на последней строке, даже если он не достигнет конца строки, и есть несколько тегов <p>.

Я использую JavaScript с Angular.

Ответ 1

Да, вы можете использовать какой-то плагин, но эту логику не так уж сложно написать. Основное понятие заключается в том, чтобы уменьшить количество текста до его соответствия. Это звучит дорого, но на практике он отлично работает и при необходимости может быть оптимизирован.

// Populate an element with text so as to fit into height
function truncate(elt, content, height) {

  function getHeight(elt) { return elt.getBoundingClientRect().height; }
  function shorten(str)   { return str.slice(0, -1); }

  elt.style.height = "auto";
  elt.textContent = content;

  // Shorten the string until it fits vertically.
  while (getHeight(elt) > height && content) {
    elt.textContent = (content = shorten(content)) + '...';
  }

}

Чтобы использовать это:

truncate(div, "Some very long text to be truncated", 200)

Чтобы использовать содержимое HTML, при необходимости адаптируйте/расширьте.

Ответ 2

Попробуйте плагин jQuery dotdotdot. URL: http://dotdotdot.frebsite.nl/

Я сделал образец кода в jsFiddle Link

Здесь код:

$(document).ready(function() {
	$(".myText").dotdotdot();
});

p {
    margin:0;
    padding:0;
    font:12px/15px Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
}
.myText {
    height:75px; /*  this needs to be the height of 5 lines of text. Here it is 15px (line-height of one line) * 5 = 75px */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/1.7.2/jquery.dotdotdot.min.js"></script>

<div class="myText">
  <p>some text</p>
  <p>some text</p>
  <p>some text</p>
  <p>some text</p>
  <p>some text</p>
  <p>some text</p>
  <p>some text</p>
</div>