我正在尝试仅显示文本的前5行。问题在于文本的设置方式是<p>一个div中的多个标签,例如
<p>
<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。
是的,您可以使用一些插件,但是编写自己的逻辑并不难。基本概念是不断减少文本的数量,直到适合为止。这听起来很昂贵,但实际上它可以正常工作,并且可以在必要时进行优化。
// 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内容,请根据需要进行调整/扩展。