Question

有没有人知道将一段文本截断为两行的简洁方法。这就是我试图截断的内容（p元素）：

<blockquote><p>&#8220;<?=$test_entry ?>&#8221;</p></blockquote><cite><?=$test_name ?></cite>

我尝试了各种解决方案，包括clamp.js（在提供的示例中甚至无法正常工作）我尝试过使用文本溢出的CSS3解决方案，但这些只截断到一行。所有其他javascript示例都使用字符串长度，如果文本大小发生变化，如果特殊字符被编码并且在许多其他条件下，则会中断。

我很乐意在必要时更改标记我只是希望能够截断文本以适应div框中的两行并使其以elipses（...）结束，或者甚至更好地使用（...“我认为这很简单，但显然不是。

有人能指出我现有的解决方案，或者给我一个线索从哪里开始。任何帮助非常感谢。

Answer 1

在这里，您可以在this SO question中找到基于jQuery的现有解决方案，该解决方案应该跨浏览器工作。

Answer 2

这是截断多行段落的非常简单的解决方案，并且还将在最后一行的末尾添加省略号。

p.truncate_text {
    color:red;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis justo nibh. Phasellus ac ante enim. Mauris ullamcorper mauris nec laoreet lacinia. Sed interdum tincidunt tempor. Cras euismod, tellus id consequat varius, est lectus sagittis justo, sit amet egestas sem dolor sit amet arcu. In commodo nibh ac nisi tincidunt tincidunt. Nullam suscipit, mi nec posuere imperdiet, odio est pellentesque arcu, at varius massa ex nec urna.</p>

<p class="truncate_text">This paragraph will truncate into 3 lines Quisque ut purus nunc. Aenean vitae lectus maximus, fermentum justo quis, lobortis neque. Curabitur lacinia in massa in efficitur. Praesent et dolor et ex sodales volutpat vel lobortis ligula. Maecenas convallis luctus tempus. Vivamus non libero nisi. Donec facilisis, odio sed dictum consectetur, eros dolor pellentesque quam, ut ornare est ligula eu ligula. Etiam elementum nibh lectus, quis sodales massa malesuada vitae. Etiam finibus quam eget condimentum rutrum. Donec et velit ipsum. </p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis justo nibh. Phasellus ac ante enim. Mauris ullamcorper mauris nec laoreet lacinia. Sed interdum tincidunt tempor. Cras euismod, tellus id consequat varius, est lectus sagittis justo, sit amet egestas sem dolor sit amet arcu. In commodo nibh ac nisi tincidunt tincidunt. Nullam suscipit, mi nec posuere imperdiet, odio est pellentesque arcu, at varius massa ex nec urna.</p>

Answer 3

使用textarea元素限制文本行！

<textarea rows="2" readonly disabled>Try enameling the ricotta broccolis with aged champaign and rum, warmed. </textarea>

然后您可以使用伪元素：after后添加省略号或'Read more'。

不要忘记'readonly'和'disabled'属性。 Readonly防止textarea与用户进行交互。禁用可防止页面中的任何表单提交值。

多行文字截断

3 个答案: