在特定行数后插入省略号

Question

我正在尝试仅显示文本的前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>

但是在这种情况下它们都不起作用，在这种情况下，我希望在最后一行的最后一个单词之后加上省略号，即使它没有到达行尾，也有多个<p>标签。

我在Angular中使用JavaScript。

Answer 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内容，请根据需要进行调整/扩展。