小编典典

在特定行数后插入省略号

css

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


阅读 290

收藏
2020-05-16

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

2020-05-16